@bcc-code/component-library-vue 0.0.0-dev.f3f88c3 → 0.0.0-dev.f3ffbc4
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/component-library.js +5971 -5927
- package/dist/component-library.umd.cjs +184 -184
- package/dist/index.css +1 -1
- package/dist/theme.css +647 -342
- package/dist-types/components/custom/BccCircleLoader/BccCircleLoader.vue.d.ts +9 -1
- package/dist-types/components/custom/BccGraphic/BccGraphic.vue.d.ts +7 -4
- package/dist-types/components/custom/BccReact/BccReact.vue.d.ts +2 -1
- package/dist-types/components/custom/BccStepIndicator/BccStepIndicator.vue.d.ts +3 -3
- package/dist-types/components/custom/BccTag/BccTag.vue.d.ts +1 -0
- package/dist-types/components/custom/BccTopNavigation/BccTopNavigation.vue.d.ts +14 -4
- package/dist-types/components/wrapped/BccMenu/BccMenu.vue.d.ts +15 -1
- package/dist-types/components/wrapped/BccRadioButton.vue.d.ts +2 -0
- package/dist-types/components/wrapped/BccSelectButton.vue.d.ts +5 -2
- package/package.json +105 -103
package/dist/theme.css
CHANGED
|
@@ -4,96 +4,222 @@
|
|
|
4
4
|
|
|
5
5
|
@import 'tailwindcss';
|
|
6
6
|
@import '@bcc-code/design-tokens/tailwind';
|
|
7
|
-
@import '@bcc-code/design-tokens/primevue/overrides';
|
|
8
7
|
|
|
9
8
|
|
|
10
9
|
/* === ./styles/theme.css === */
|
|
11
10
|
@theme {
|
|
11
|
+
/* spacing variables */
|
|
12
|
+
--spacing-inset-top: env(safe-area-inset-top, var(--safe-area-inset-top, 0px));
|
|
13
|
+
--spacing-inset-top-1: max(0.25rem, env(safe-area-inset-top, var(--safe-area-inset-top, 0px)));
|
|
14
|
+
--spacing-inset-top-2: max(0.5rem, env(safe-area-inset-top, var(--safe-area-inset-top, 0px)));
|
|
15
|
+
--spacing-inset-top-4: max(1rem, env(safe-area-inset-top, var(--safe-area-inset-top, 0px)));
|
|
16
|
+
--spacing-inset-bottom: env(safe-area-inset-bottom, var(--safe-area-inset-bottom, 0px));
|
|
17
|
+
--spacing-inset-bottom-1: max(0.25rem, env(safe-area-inset-bottom, var(--safe-area-inset-bottom, 0px)));
|
|
18
|
+
--spacing-inset-bottom-2: max(0.5rem, env(safe-area-inset-bottom, var(--safe-area-inset-bottom, 0px)));
|
|
19
|
+
--spacing-inset-bottom-4: max(1rem, env(safe-area-inset-bottom, var(--safe-area-inset-bottom, 0px)));
|
|
20
|
+
--spacing-inset-left: env(safe-area-inset-left, var(--safe-area-inset-left, 0px));
|
|
21
|
+
--spacing-inset-right: env(safe-area-inset-right, var(--safe-area-inset-right, 0px));
|
|
22
|
+
|
|
23
|
+
--spacing-18: 4.5rem;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.ctx-default {
|
|
27
|
+
@apply ctx-default;
|
|
28
|
+
}
|
|
29
|
+
.ctx-success {
|
|
30
|
+
@apply ctx-success-subtlest;
|
|
31
|
+
}
|
|
32
|
+
.ctx-danger {
|
|
33
|
+
@apply ctx-danger-subtlest;
|
|
34
|
+
}
|
|
35
|
+
.ctx-warning {
|
|
36
|
+
@apply ctx-warning-subtlest;
|
|
37
|
+
}
|
|
38
|
+
.ctx-info {
|
|
39
|
+
@apply ctx-info-subtlest;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.ctx-blue-bolder {
|
|
43
|
+
@apply ctx-blue-bolder;
|
|
44
|
+
}
|
|
45
|
+
.ctx-blue-subtle {
|
|
46
|
+
@apply ctx-blue-subtle;
|
|
47
|
+
}
|
|
48
|
+
.ctx-blue-subtler {
|
|
49
|
+
@apply ctx-blue-subtler;
|
|
50
|
+
}
|
|
51
|
+
.ctx-blue-subtlest {
|
|
52
|
+
@apply ctx-blue-subtlest;
|
|
53
|
+
}
|
|
54
|
+
.ctx-brand-boldest {
|
|
55
|
+
@apply ctx-brand-boldest;
|
|
56
|
+
}
|
|
57
|
+
.ctx-brand-bolder {
|
|
58
|
+
@apply ctx-brand-bolder;
|
|
59
|
+
}
|
|
60
|
+
.ctx-brand-bold {
|
|
61
|
+
@apply ctx-brand-bold;
|
|
62
|
+
}
|
|
63
|
+
.ctx-brand-subtle {
|
|
64
|
+
@apply ctx-brand-subtle;
|
|
65
|
+
}
|
|
66
|
+
.ctx-brand-subtler {
|
|
67
|
+
@apply ctx-brand-subtler;
|
|
68
|
+
}
|
|
69
|
+
.ctx-brand-subtlest {
|
|
70
|
+
@apply ctx-brand-subtlest;
|
|
71
|
+
}
|
|
72
|
+
.ctx-brown-bolder {
|
|
73
|
+
@apply ctx-brown-bolder;
|
|
74
|
+
}
|
|
75
|
+
.ctx-brown-subtle {
|
|
76
|
+
@apply ctx-brown-subtle;
|
|
77
|
+
}
|
|
78
|
+
.ctx-brown-subtler {
|
|
79
|
+
@apply ctx-brown-subtler;
|
|
80
|
+
}
|
|
81
|
+
.ctx-brown-subtlest {
|
|
82
|
+
@apply ctx-brown-subtlest;
|
|
83
|
+
}
|
|
84
|
+
.ctx-danger-subtlest {
|
|
85
|
+
@apply ctx-danger;
|
|
86
|
+
}
|
|
87
|
+
.ctx-danger-bolder {
|
|
88
|
+
@apply ctx-danger-bolder;
|
|
89
|
+
}
|
|
90
|
+
.ctx-gray-bolder {
|
|
91
|
+
@apply ctx-gray-bolder;
|
|
92
|
+
}
|
|
93
|
+
.ctx-gray-subtle {
|
|
94
|
+
@apply ctx-gray-subtle;
|
|
95
|
+
}
|
|
96
|
+
.ctx-gray-subtler {
|
|
97
|
+
@apply ctx-gray-subtler;
|
|
98
|
+
}
|
|
99
|
+
.ctx-gray-subtlest {
|
|
100
|
+
@apply ctx-gray-subtlest;
|
|
101
|
+
}
|
|
102
|
+
.ctx-green-bolder {
|
|
103
|
+
@apply ctx-green-bolder;
|
|
104
|
+
}
|
|
105
|
+
.ctx-green-subtle {
|
|
106
|
+
@apply ctx-green-subtle;
|
|
107
|
+
}
|
|
108
|
+
.ctx-green-subtler {
|
|
109
|
+
@apply ctx-green-subtler;
|
|
110
|
+
}
|
|
111
|
+
.ctx-green-subtlest {
|
|
112
|
+
@apply ctx-green-subtlest;
|
|
113
|
+
}
|
|
114
|
+
.ctx-info-subtlest {
|
|
115
|
+
@apply ctx-info;
|
|
116
|
+
}
|
|
117
|
+
.ctx-info-bolder {
|
|
118
|
+
@apply ctx-info-bolder;
|
|
119
|
+
}
|
|
120
|
+
.ctx-magenta-bolder {
|
|
121
|
+
@apply ctx-magenta-bolder;
|
|
122
|
+
}
|
|
123
|
+
.ctx-magenta-subtle {
|
|
124
|
+
@apply ctx-magenta-subtle;
|
|
125
|
+
}
|
|
126
|
+
.ctx-magenta-subtler {
|
|
127
|
+
@apply ctx-magenta-subtler;
|
|
128
|
+
}
|
|
129
|
+
.ctx-magenta-subtlest {
|
|
130
|
+
@apply ctx-magenta-subtlest;
|
|
131
|
+
}
|
|
132
|
+
.ctx-neutral-boldest {
|
|
133
|
+
@apply ctx-neutral-boldest;
|
|
134
|
+
}
|
|
135
|
+
.ctx-neutral-bolder {
|
|
136
|
+
@apply ctx-neutral-bolder;
|
|
137
|
+
}
|
|
138
|
+
.ctx-neutral-bold {
|
|
139
|
+
@apply ctx-neutral-bold;
|
|
140
|
+
}
|
|
141
|
+
.ctx-neutral-subtle {
|
|
142
|
+
@apply ctx-neutral-subtle;
|
|
143
|
+
}
|
|
144
|
+
.ctx-neutral-subtler {
|
|
145
|
+
@apply ctx-neutral-subtler;
|
|
146
|
+
}
|
|
147
|
+
.ctx-neutral-subtlest {
|
|
148
|
+
@apply ctx-neutral-subtlest;
|
|
149
|
+
}
|
|
150
|
+
.ctx-orange-bolder {
|
|
151
|
+
@apply ctx-orange-bolder;
|
|
152
|
+
}
|
|
153
|
+
.ctx-orange-subtle {
|
|
154
|
+
@apply ctx-orange-subtle;
|
|
155
|
+
}
|
|
156
|
+
.ctx-orange-subtler {
|
|
157
|
+
@apply ctx-orange-subtler;
|
|
158
|
+
}
|
|
159
|
+
.ctx-orange-subtlest {
|
|
160
|
+
@apply ctx-orange-subtlest;
|
|
161
|
+
}
|
|
162
|
+
.ctx-purple-bolder {
|
|
163
|
+
@apply ctx-purple-bolder;
|
|
164
|
+
}
|
|
165
|
+
.ctx-purple-subtle {
|
|
166
|
+
@apply ctx-purple-subtle;
|
|
167
|
+
}
|
|
168
|
+
.ctx-purple-subtler {
|
|
169
|
+
@apply ctx-purple-subtler;
|
|
170
|
+
}
|
|
171
|
+
.ctx-purple-subtlest {
|
|
172
|
+
@apply ctx-purple-subtlest;
|
|
173
|
+
}
|
|
174
|
+
.ctx-red-bolder {
|
|
175
|
+
@apply ctx-red-bolder;
|
|
176
|
+
}
|
|
177
|
+
.ctx-red-subtle {
|
|
178
|
+
@apply ctx-red-subtle;
|
|
179
|
+
}
|
|
180
|
+
.ctx-red-subtler {
|
|
181
|
+
@apply ctx-red-subtler;
|
|
182
|
+
}
|
|
183
|
+
.ctx-red-subtlest {
|
|
184
|
+
@apply ctx-red-subtlest;
|
|
185
|
+
}
|
|
186
|
+
.ctx-success-subtlest {
|
|
187
|
+
@apply ctx-success;
|
|
188
|
+
}
|
|
189
|
+
.ctx-success-bolder {
|
|
190
|
+
@apply ctx-success-bolder;
|
|
191
|
+
}
|
|
192
|
+
.ctx-teal-bolder {
|
|
193
|
+
@apply ctx-teal-bolder;
|
|
194
|
+
}
|
|
195
|
+
.ctx-teal-subtle {
|
|
196
|
+
@apply ctx-teal-subtle;
|
|
197
|
+
}
|
|
198
|
+
.ctx-teal-subtler {
|
|
199
|
+
@apply ctx-teal-subtler;
|
|
200
|
+
}
|
|
201
|
+
.ctx-teal-subtlest {
|
|
202
|
+
@apply ctx-teal-subtlest;
|
|
203
|
+
}
|
|
204
|
+
.ctx-warning-subtlest {
|
|
205
|
+
@apply ctx-warning;
|
|
206
|
+
}
|
|
207
|
+
.ctx-warning-bolder {
|
|
208
|
+
@apply ctx-warning-bolder;
|
|
209
|
+
}
|
|
210
|
+
.ctx-yellow-bolder {
|
|
211
|
+
@apply ctx-yellow-bolder;
|
|
212
|
+
}
|
|
213
|
+
.ctx-yellow-subtle {
|
|
214
|
+
@apply ctx-yellow-subtle;
|
|
215
|
+
}
|
|
216
|
+
.ctx-yellow-subtler {
|
|
217
|
+
@apply ctx-yellow-subtler;
|
|
218
|
+
}
|
|
219
|
+
.ctx-yellow-subtlest {
|
|
220
|
+
@apply ctx-yellow-subtlest;
|
|
221
|
+
}
|
|
12
222
|
|
|
13
|
-
/* spacing variables */
|
|
14
|
-
--spacing-inset-top: env(safe-area-inset-top, var(--safe-area-inset-top, 0px));
|
|
15
|
-
--spacing-inset-top-1: max(0.25rem, env(safe-area-inset-top, var(--safe-area-inset-top, 0px)));
|
|
16
|
-
--spacing-inset-top-2: max(0.5rem, env(safe-area-inset-top, var(--safe-area-inset-top, 0px)));
|
|
17
|
-
--spacing-inset-top-4: max(1rem, env(safe-area-inset-top, var(--safe-area-inset-top, 0px)));
|
|
18
|
-
--spacing-inset-bottom: env(safe-area-inset-bottom, var(--safe-area-inset-bottom, 0px));
|
|
19
|
-
--spacing-inset-bottom-1: max(0.25rem, env(safe-area-inset-bottom, var(--safe-area-inset-bottom, 0px)));
|
|
20
|
-
--spacing-inset-bottom-2: max(0.5rem, env(safe-area-inset-bottom, var(--safe-area-inset-bottom, 0px)));
|
|
21
|
-
--spacing-inset-bottom-4: max(1rem, env(safe-area-inset-bottom, var(--safe-area-inset-bottom, 0px)));
|
|
22
|
-
--spacing-inset-left: env(safe-area-inset-left, var(--safe-area-inset-left, 0px));
|
|
23
|
-
--spacing-inset-right: env(safe-area-inset-right, var(--safe-area-inset-right, 0px));
|
|
24
|
-
|
|
25
|
-
--spacing-18: 4.5rem;
|
|
26
|
-
|
|
27
|
-
/* color variables */
|
|
28
|
-
--color-overlay: rgba(17, 24, 39, 0.85);
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.ctx-default { @apply ctx-default; }
|
|
32
|
-
.ctx-success { @apply ctx-success-subtlest; }
|
|
33
|
-
.ctx-danger { @apply ctx-danger-subtlest; }
|
|
34
|
-
.ctx-warning { @apply ctx-warning-subtlest; }
|
|
35
|
-
.ctx-info { @apply ctx-info-subtlest; }
|
|
36
|
-
|
|
37
|
-
.ctx-blue-bolder { @apply ctx-blue-bolder; }
|
|
38
|
-
.ctx-blue-subtle { @apply ctx-blue-subtle; }
|
|
39
|
-
.ctx-blue-subtler { @apply ctx-blue-subtler; }
|
|
40
|
-
.ctx-blue-subtlest { @apply ctx-blue-subtlest; }
|
|
41
|
-
.ctx-brand-boldest { @apply ctx-brand-boldest; }
|
|
42
|
-
.ctx-brand-bolder { @apply ctx-brand-bolder; }
|
|
43
|
-
.ctx-brand-bold { @apply ctx-brand-bold; }
|
|
44
|
-
.ctx-brand-subtle { @apply ctx-brand-subtle; }
|
|
45
|
-
.ctx-brand-subtler { @apply ctx-brand-subtler; }
|
|
46
|
-
.ctx-brand-subtlest { @apply ctx-brand-subtlest; }
|
|
47
|
-
.ctx-brown-bolder { @apply ctx-brown-bolder; }
|
|
48
|
-
.ctx-brown-subtle { @apply ctx-brown-subtle; }
|
|
49
|
-
.ctx-brown-subtler { @apply ctx-brown-subtler; }
|
|
50
|
-
.ctx-brown-subtlest { @apply ctx-brown-subtlest; }
|
|
51
|
-
.ctx-danger-subtlest { @apply ctx-danger; }
|
|
52
|
-
.ctx-danger-bolder { @apply ctx-danger-bolder; }
|
|
53
|
-
.ctx-gray-bolder { @apply ctx-gray-bolder; }
|
|
54
|
-
.ctx-gray-subtle { @apply ctx-gray-subtle; }
|
|
55
|
-
.ctx-gray-subtler { @apply ctx-gray-subtler; }
|
|
56
|
-
.ctx-gray-subtlest { @apply ctx-gray-subtlest; }
|
|
57
|
-
.ctx-green-bolder { @apply ctx-green-bolder; }
|
|
58
|
-
.ctx-green-subtle { @apply ctx-green-subtle; }
|
|
59
|
-
.ctx-green-subtler { @apply ctx-green-subtler; }
|
|
60
|
-
.ctx-green-subtlest { @apply ctx-green-subtlest; }
|
|
61
|
-
.ctx-info-subtlest { @apply ctx-info; }
|
|
62
|
-
.ctx-info-bolder { @apply ctx-info-bolder; }
|
|
63
|
-
.ctx-magenta-bolder { @apply ctx-magenta-bolder; }
|
|
64
|
-
.ctx-magenta-subtle { @apply ctx-magenta-subtle; }
|
|
65
|
-
.ctx-magenta-subtler { @apply ctx-magenta-subtler; }
|
|
66
|
-
.ctx-magenta-subtlest { @apply ctx-magenta-subtlest; }
|
|
67
|
-
.ctx-neutral-boldest { @apply ctx-neutral-boldest; }
|
|
68
|
-
.ctx-neutral-bolder { @apply ctx-neutral-bolder; }
|
|
69
|
-
.ctx-neutral-bold { @apply ctx-neutral-bold; }
|
|
70
|
-
.ctx-neutral-subtle { @apply ctx-neutral-subtle; }
|
|
71
|
-
.ctx-neutral-subtler { @apply ctx-neutral-subtler; }
|
|
72
|
-
.ctx-neutral-subtlest { @apply ctx-neutral-subtlest; }
|
|
73
|
-
.ctx-orange-bolder { @apply ctx-orange-bolder; }
|
|
74
|
-
.ctx-orange-subtle { @apply ctx-orange-subtle; }
|
|
75
|
-
.ctx-orange-subtler { @apply ctx-orange-subtler; }
|
|
76
|
-
.ctx-orange-subtlest { @apply ctx-orange-subtlest; }
|
|
77
|
-
.ctx-purple-bolder { @apply ctx-purple-bolder; }
|
|
78
|
-
.ctx-purple-subtle { @apply ctx-purple-subtle; }
|
|
79
|
-
.ctx-purple-subtler { @apply ctx-purple-subtler; }
|
|
80
|
-
.ctx-purple-subtlest { @apply ctx-purple-subtlest; }
|
|
81
|
-
.ctx-red-bolder { @apply ctx-red-bolder; }
|
|
82
|
-
.ctx-red-subtle { @apply ctx-red-subtle; }
|
|
83
|
-
.ctx-red-subtler { @apply ctx-red-subtler; }
|
|
84
|
-
.ctx-red-subtlest { @apply ctx-red-subtlest; }
|
|
85
|
-
.ctx-success-subtlest { @apply ctx-success; }
|
|
86
|
-
.ctx-success-bolder { @apply ctx-success-bolder; }
|
|
87
|
-
.ctx-teal-bolder { @apply ctx-teal-bolder; }
|
|
88
|
-
.ctx-teal-subtle { @apply ctx-teal-subtle; }
|
|
89
|
-
.ctx-teal-subtler { @apply ctx-teal-subtler; }
|
|
90
|
-
.ctx-teal-subtlest { @apply ctx-teal-subtlest; }
|
|
91
|
-
.ctx-warning-subtlest { @apply ctx-warning; }
|
|
92
|
-
.ctx-warning-bolder { @apply ctx-warning-bolder; }
|
|
93
|
-
.ctx-yellow-bolder { @apply ctx-yellow-bolder; }
|
|
94
|
-
.ctx-yellow-subtle { @apply ctx-yellow-subtle; }
|
|
95
|
-
.ctx-yellow-subtler { @apply ctx-yellow-subtler; }
|
|
96
|
-
.ctx-yellow-subtlest { @apply ctx-yellow-subtlest; }
|
|
97
223
|
|
|
98
224
|
|
|
99
225
|
/* === ./styles/semantic.css === */
|
|
@@ -774,18 +900,18 @@
|
|
|
774
900
|
}
|
|
775
901
|
|
|
776
902
|
@utility ctx-brand-bolder {
|
|
777
|
-
--ctx-text: var(--color-default-
|
|
903
|
+
--ctx-text: var(--color-default-neutral-0);
|
|
778
904
|
--ctx-text-bold: var(--color-default-neutral-0);
|
|
779
|
-
--ctx-background: var(--color-default-bcc-
|
|
780
|
-
--ctx-gradient: var(--color-default-bcc-
|
|
905
|
+
--ctx-background: var(--color-default-bcc-800);
|
|
906
|
+
--ctx-gradient: var(--color-default-bcc-900);
|
|
781
907
|
--ctx-border: var(--color-default-bcc-700);
|
|
782
908
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
783
|
-
--ctx-text-hover: var(--color-default-
|
|
784
|
-
--ctx-text-pressed: var(--color-default-
|
|
785
|
-
--ctx-background-hover: var(--color-default-bcc-
|
|
786
|
-
--ctx-background-pressed: var(--color-default-bcc-
|
|
787
|
-
--ctx-gradient-hover: var(--color-default-bcc-
|
|
788
|
-
--ctx-gradient-pressed: var(--color-default-bcc-
|
|
909
|
+
--ctx-text-hover: var(--color-default-neutral-0);
|
|
910
|
+
--ctx-text-pressed: var(--color-default-neutral-0);
|
|
911
|
+
--ctx-background-hover: var(--color-default-bcc-900);
|
|
912
|
+
--ctx-background-pressed: var(--color-default-bcc-1000);
|
|
913
|
+
--ctx-gradient-hover: var(--color-default-bcc-1000);
|
|
914
|
+
--ctx-gradient-pressed: var(--color-default-bcc-1000);
|
|
789
915
|
--ctx-border-hover: var(--color-default-bcc-700);
|
|
790
916
|
--ctx-border-pressed: var(--color-default-bcc-700);
|
|
791
917
|
}
|
|
@@ -980,16 +1106,16 @@
|
|
|
980
1106
|
@utility ctx-gray-bolder {
|
|
981
1107
|
--ctx-text: var(--color-default-neutral-200);
|
|
982
1108
|
--ctx-text-bold: var(--color-default-neutral-100);
|
|
983
|
-
--ctx-background: var(--color-default-neutral-
|
|
984
|
-
--ctx-gradient: var(--color-default-neutral-
|
|
1109
|
+
--ctx-background: var(--color-default-neutral-700);
|
|
1110
|
+
--ctx-gradient: var(--color-default-neutral-800);
|
|
985
1111
|
--ctx-border: var(--color-default-neutral-700);
|
|
986
1112
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
987
1113
|
--ctx-text-hover: var(--color-default-neutral-200);
|
|
988
1114
|
--ctx-text-pressed: var(--color-default-neutral-200);
|
|
989
|
-
--ctx-background-hover: var(--color-default-neutral-
|
|
990
|
-
--ctx-background-pressed: var(--color-default-neutral-
|
|
991
|
-
--ctx-gradient-hover: var(--color-default-neutral-
|
|
992
|
-
--ctx-gradient-pressed: var(--color-default-neutral-
|
|
1115
|
+
--ctx-background-hover: var(--color-default-neutral-800);
|
|
1116
|
+
--ctx-background-pressed: var(--color-default-neutral-900);
|
|
1117
|
+
--ctx-gradient-hover: var(--color-default-neutral-900);
|
|
1118
|
+
--ctx-gradient-pressed: var(--color-default-neutral-900);
|
|
993
1119
|
--ctx-border-hover: var(--color-default-neutral-700);
|
|
994
1120
|
--ctx-border-pressed: var(--color-default-neutral-700);
|
|
995
1121
|
}
|
|
@@ -1728,88 +1854,104 @@
|
|
|
1728
1854
|
|
|
1729
1855
|
|
|
1730
1856
|
/* === ./styles/context.css === */
|
|
1731
|
-
|
|
1732
1857
|
@theme {
|
|
1733
|
-
|
|
1734
|
-
|
|
1735
|
-
|
|
1736
|
-
|
|
1737
|
-
|
|
1738
|
-
|
|
1739
|
-
|
|
1740
|
-
|
|
1741
|
-
|
|
1742
|
-
|
|
1858
|
+
--color-brand-100: var(--color-bcc-100);
|
|
1859
|
+
--color-brand-200: var(--color-bcc-200);
|
|
1860
|
+
--color-brand-300: var(--color-bcc-300);
|
|
1861
|
+
--color-brand-400: var(--color-bcc-400);
|
|
1862
|
+
--color-brand-500: var(--color-bcc-500);
|
|
1863
|
+
--color-brand-600: var(--color-bcc-600);
|
|
1864
|
+
--color-brand-700: var(--color-bcc-700);
|
|
1865
|
+
--color-brand-800: var(--color-bcc-800);
|
|
1866
|
+
--color-brand-900: var(--color-bcc-900);
|
|
1867
|
+
--color-brand-1000: var(--color-bcc-1000);
|
|
1743
1868
|
}
|
|
1744
1869
|
|
|
1745
1870
|
/** DEFAULT CONTEXTS */
|
|
1746
1871
|
@utility ctx-default {
|
|
1747
|
-
|
|
1872
|
+
@apply ctx-neutral-subtlest;
|
|
1873
|
+
}
|
|
1874
|
+
@utility ctx-success {
|
|
1875
|
+
@apply ctx-success-subtlest;
|
|
1876
|
+
}
|
|
1877
|
+
@utility ctx-danger {
|
|
1878
|
+
@apply ctx-danger-subtlest;
|
|
1879
|
+
}
|
|
1880
|
+
@utility ctx-warning {
|
|
1881
|
+
@apply ctx-warning-subtlest;
|
|
1882
|
+
}
|
|
1883
|
+
@utility ctx-info {
|
|
1884
|
+
@apply ctx-info-subtlest;
|
|
1748
1885
|
}
|
|
1749
|
-
@utility ctx-success { @apply ctx-success-subtlest; }
|
|
1750
|
-
@utility ctx-danger { @apply ctx-danger-subtlest; }
|
|
1751
|
-
@utility ctx-warning { @apply ctx-warning-subtlest; }
|
|
1752
|
-
@utility ctx-info { @apply ctx-info-subtlest; }
|
|
1753
1886
|
|
|
1754
1887
|
@utility text-ctx {
|
|
1755
|
-
|
|
1888
|
+
color: var(--ctx-text);
|
|
1756
1889
|
}
|
|
1757
1890
|
|
|
1758
1891
|
@utility text-ctx-bold {
|
|
1759
|
-
|
|
1892
|
+
color: var(--ctx-text-bold);
|
|
1760
1893
|
}
|
|
1761
1894
|
|
|
1762
1895
|
@utility bg-ctx {
|
|
1763
|
-
|
|
1896
|
+
background-color: var(--ctx-background);
|
|
1764
1897
|
}
|
|
1765
1898
|
|
|
1766
1899
|
@utility border-ctx {
|
|
1767
|
-
|
|
1900
|
+
border-color: var(--ctx-border);
|
|
1768
1901
|
}
|
|
1769
1902
|
|
|
1770
1903
|
@utility shadow-ctx {
|
|
1771
|
-
|
|
1904
|
+
--tw-shadow-color: var(--ctx-shadow);
|
|
1772
1905
|
}
|
|
1773
1906
|
|
|
1774
1907
|
@utility ctx {
|
|
1775
|
-
|
|
1776
|
-
|
|
1777
|
-
|
|
1908
|
+
background-color: var(--ctx-background);
|
|
1909
|
+
color: var(--ctx-text);
|
|
1910
|
+
border-color: var(--ctx-border);
|
|
1778
1911
|
}
|
|
1779
1912
|
|
|
1780
1913
|
@utility ctx-gradient {
|
|
1781
|
-
|
|
1914
|
+
background: linear-gradient(225deg, var(--ctx-background) 0%, var(--ctx-gradient) 100%);
|
|
1915
|
+
|
|
1916
|
+
@variant dark {
|
|
1917
|
+
background: linear-gradient(225deg, var(--ctx-gradient) 0%, var(--ctx-background) 100%);
|
|
1918
|
+
}
|
|
1782
1919
|
}
|
|
1783
1920
|
|
|
1784
1921
|
@utility ctx-raised {
|
|
1785
|
-
|
|
1922
|
+
box-shadow:
|
|
1923
|
+
0 1px 1px 0 var(--ctx-shadow),
|
|
1924
|
+
0 0 1px 0 var(--ctx-shadow);
|
|
1786
1925
|
}
|
|
1787
1926
|
|
|
1788
1927
|
@utility ctx-flat {
|
|
1789
|
-
|
|
1928
|
+
--ctx-background: transparent;
|
|
1790
1929
|
|
|
1791
|
-
|
|
1792
|
-
|
|
1793
|
-
|
|
1930
|
+
@variant hover {
|
|
1931
|
+
--ctx-background: var(--ctx-background-hover);
|
|
1932
|
+
}
|
|
1794
1933
|
}
|
|
1795
1934
|
|
|
1796
1935
|
@utility clickable {
|
|
1797
|
-
|
|
1936
|
+
cursor: pointer;
|
|
1798
1937
|
}
|
|
1799
1938
|
|
|
1800
|
-
|
|
1801
|
-
|
|
1802
|
-
|
|
1803
|
-
|
|
1804
|
-
|
|
1939
|
+
@media (hover: hover) and (pointer: fine) {
|
|
1940
|
+
.clickable:hover {
|
|
1941
|
+
--ctx-background: var(--ctx-background-hover);
|
|
1942
|
+
--ctx-text: var(--ctx-text-hover);
|
|
1943
|
+
--ctx-border: var(--ctx-border-hover);
|
|
1944
|
+
}
|
|
1805
1945
|
|
|
1806
|
-
.clickable:active {
|
|
1807
|
-
|
|
1808
|
-
|
|
1809
|
-
|
|
1946
|
+
.clickable:active {
|
|
1947
|
+
--ctx-background: var(--ctx-background-pressed);
|
|
1948
|
+
--ctx-text: var(--ctx-text-pressed);
|
|
1949
|
+
--ctx-border: var(--ctx-border-pressed);
|
|
1950
|
+
}
|
|
1810
1951
|
}
|
|
1811
1952
|
|
|
1812
1953
|
|
|
1954
|
+
|
|
1813
1955
|
/* === ./styles/fonts.css === */
|
|
1814
1956
|
@utility heading-xs { font: var(--heading-xs); }
|
|
1815
1957
|
@utility heading-sm { font: var(--heading-sm); }
|
|
@@ -1829,6 +1971,10 @@
|
|
|
1829
1971
|
/* === ./styles/component-overrides.css === */
|
|
1830
1972
|
/** Custom styles to fix primevue components that are not custom or wrapped. */
|
|
1831
1973
|
|
|
1974
|
+
:root {
|
|
1975
|
+
--p-toast-width: min(85vw, 400px);
|
|
1976
|
+
}
|
|
1977
|
+
|
|
1832
1978
|
/**
|
|
1833
1979
|
* GUTTER FIX
|
|
1834
1980
|
* Primevue's dropwdown components are all missing the gap between input and dropdown
|
|
@@ -1927,6 +2073,155 @@
|
|
|
1927
2073
|
font-size: var(--text-md);
|
|
1928
2074
|
}
|
|
1929
2075
|
|
|
2076
|
+
/* primevue-overrides.css - CSS-level component overrides */
|
|
2077
|
+
@layer custom {
|
|
2078
|
+
.p-accordionheader {
|
|
2079
|
+
gap: var(--p-accordion-header-gap);
|
|
2080
|
+
}
|
|
2081
|
+
|
|
2082
|
+
.p-autocomplete-input-multiple {
|
|
2083
|
+
min-height: var(--p-autocomplete-input-multiple-min-height);
|
|
2084
|
+
gap: var(--p-autocomplete-input-multiple-gap);
|
|
2085
|
+
}
|
|
2086
|
+
|
|
2087
|
+
.p-badge-circle {
|
|
2088
|
+
border-radius: var(--p-badge-circle-border-radius);
|
|
2089
|
+
}
|
|
2090
|
+
|
|
2091
|
+
.p-button {
|
|
2092
|
+
min-height: var(--p-button-min-height);
|
|
2093
|
+
}
|
|
2094
|
+
|
|
2095
|
+
.p-button-sm {
|
|
2096
|
+
min-height: var(--p-button-sm-min-height);
|
|
2097
|
+
}
|
|
2098
|
+
|
|
2099
|
+
.p-button-lg {
|
|
2100
|
+
min-height: var(--p-button-lg-min-height);
|
|
2101
|
+
}
|
|
2102
|
+
|
|
2103
|
+
.p-button.p-button-icon-only {
|
|
2104
|
+
min-width: var(--p-button-icon-only-width);
|
|
2105
|
+
}
|
|
2106
|
+
|
|
2107
|
+
.p-button-sm.p-button-icon-only {
|
|
2108
|
+
min-width: var(--p-button-sm-icon-only-width);
|
|
2109
|
+
}
|
|
2110
|
+
|
|
2111
|
+
.p-button-lg.p-button-icon-only {
|
|
2112
|
+
min-width: var(--p-button-lg-icon-only-width);
|
|
2113
|
+
}
|
|
2114
|
+
|
|
2115
|
+
.p-divider {
|
|
2116
|
+
gap: var(--p-divider-content-gap);
|
|
2117
|
+
}
|
|
2118
|
+
|
|
2119
|
+
.p-inputgroupaddon {
|
|
2120
|
+
min-height: var(--p-inputgroup-addon-min-height);
|
|
2121
|
+
}
|
|
2122
|
+
|
|
2123
|
+
.p-inputtext {
|
|
2124
|
+
min-height: var(--p-inputtext-min-height);
|
|
2125
|
+
}
|
|
2126
|
+
|
|
2127
|
+
.p-inputtext-sm {
|
|
2128
|
+
min-height: var(--p-inputtext-sm-min-height);
|
|
2129
|
+
}
|
|
2130
|
+
|
|
2131
|
+
.p-inputtext-lg {
|
|
2132
|
+
min-height: var(--p-inputtext-lg-min-height);
|
|
2133
|
+
}
|
|
2134
|
+
|
|
2135
|
+
.p-message-text {
|
|
2136
|
+
line-height: var(--p-message-text-line-height);
|
|
2137
|
+
}
|
|
2138
|
+
|
|
2139
|
+
.p-multiselect {
|
|
2140
|
+
min-height: var(--p-multiselect-min-height);
|
|
2141
|
+
}
|
|
2142
|
+
|
|
2143
|
+
.p-multiselect-sm {
|
|
2144
|
+
min-height: var(--p-multiselect-sm-min-height);
|
|
2145
|
+
}
|
|
2146
|
+
|
|
2147
|
+
.p-multiselect-lg {
|
|
2148
|
+
min-height: var(--p-multiselect-lg-min-height);
|
|
2149
|
+
}
|
|
2150
|
+
|
|
2151
|
+
.p-multiselect-label-container {
|
|
2152
|
+
display: flex;
|
|
2153
|
+
align-items: center;
|
|
2154
|
+
}
|
|
2155
|
+
|
|
2156
|
+
.p-radiobutton {
|
|
2157
|
+
gap: var(--p-radiobutton-gap);
|
|
2158
|
+
border-radius: var(--p-radiobutton-border-radius);
|
|
2159
|
+
}
|
|
2160
|
+
|
|
2161
|
+
.p-radiobutton-icon {
|
|
2162
|
+
border-radius: var(--p-radiobutton-icon-border-radius);
|
|
2163
|
+
}
|
|
2164
|
+
|
|
2165
|
+
.p-radiobutton-icon-sm {
|
|
2166
|
+
border-radius: var(--p-radiobutton-icon-sm-border-radius);
|
|
2167
|
+
}
|
|
2168
|
+
|
|
2169
|
+
.p-radiobutton-icon-lg {
|
|
2170
|
+
border-radius: var(--p-radiobutton-icon-lg-border-radius);
|
|
2171
|
+
}
|
|
2172
|
+
|
|
2173
|
+
.p-select {
|
|
2174
|
+
min-height: var(--p-select-min-height);
|
|
2175
|
+
}
|
|
2176
|
+
|
|
2177
|
+
.p-select-sm {
|
|
2178
|
+
min-height: var(--p-select-sm-min-height);
|
|
2179
|
+
}
|
|
2180
|
+
|
|
2181
|
+
.p-select-lg {
|
|
2182
|
+
min-height: var(--p-select-lg-min-height);
|
|
2183
|
+
}
|
|
2184
|
+
|
|
2185
|
+
.p-select-label {
|
|
2186
|
+
display: flex;
|
|
2187
|
+
align-items: center;
|
|
2188
|
+
}
|
|
2189
|
+
|
|
2190
|
+
.p-select-option {
|
|
2191
|
+
gap: var(--p-select-option-gap);
|
|
2192
|
+
}
|
|
2193
|
+
|
|
2194
|
+
.p-textarea {
|
|
2195
|
+
min-height: var(--p-textarea-min-height);
|
|
2196
|
+
}
|
|
2197
|
+
|
|
2198
|
+
.p-togglebutton {
|
|
2199
|
+
min-height: var(--p-togglebutton-min-height);
|
|
2200
|
+
}
|
|
2201
|
+
|
|
2202
|
+
.p-togglebutton .p-togglebutton-sm {
|
|
2203
|
+
min-height: var(--p-togglebutton-sm-min-height);
|
|
2204
|
+
border-radius: var(--p-togglebutton-sm-border-radius);
|
|
2205
|
+
}
|
|
2206
|
+
|
|
2207
|
+
.p-togglebutton-lg {
|
|
2208
|
+
min-height: var(--p-togglebutton-lg-min-height);
|
|
2209
|
+
}
|
|
2210
|
+
|
|
2211
|
+
.p-togglebutton .p-togglebutton-content {
|
|
2212
|
+
min-height: var(--p-togglebutton-content-min-height);
|
|
2213
|
+
}
|
|
2214
|
+
|
|
2215
|
+
.p-togglebutton-sm .p-togglebutton-content {
|
|
2216
|
+
min-height: var(--p-togglebutton-content-sm-min-height);
|
|
2217
|
+
border-radius: var(--p-togglebutton-content-sm-border-radius);
|
|
2218
|
+
}
|
|
2219
|
+
|
|
2220
|
+
.p-togglebutton-lg .p-togglebutton-content {
|
|
2221
|
+
min-height: var(--p-togglebutton-content-lg-min-height);
|
|
2222
|
+
}
|
|
2223
|
+
}
|
|
2224
|
+
|
|
1930
2225
|
|
|
1931
2226
|
|
|
1932
2227
|
|
|
@@ -1942,29 +2237,27 @@
|
|
|
1942
2237
|
}
|
|
1943
2238
|
|
|
1944
2239
|
.bcc-app-nav-item {
|
|
1945
|
-
@apply
|
|
2240
|
+
@apply relative flex h-12 flex-1 flex-col items-center justify-center gap-1 transition-colors focus:ring-0 focus:outline-none;
|
|
1946
2241
|
}
|
|
1947
2242
|
|
|
1948
2243
|
.bcc-nav-item-icon {
|
|
1949
|
-
@apply size-6
|
|
2244
|
+
@apply size-6 icon-subtlest;
|
|
1950
2245
|
}
|
|
1951
2246
|
|
|
1952
2247
|
.bcc-nav-item-badge {
|
|
1953
|
-
@apply absolute top-0 right-1
|
|
2248
|
+
@apply absolute top-0 right-1;
|
|
1954
2249
|
}
|
|
1955
2250
|
|
|
1956
2251
|
.bcc-nav-item-title {
|
|
1957
|
-
@apply
|
|
2252
|
+
@apply heading-xs text-center text-subtlest opacity-75;
|
|
1958
2253
|
}
|
|
1959
2254
|
|
|
1960
|
-
.bcc-app-nav-item--active {
|
|
1961
|
-
@apply text-selected;
|
|
2255
|
+
.bcc-app-nav-item--active .bcc-nav-item-title {
|
|
2256
|
+
@apply text-selected opacity-100;
|
|
1962
2257
|
}
|
|
1963
2258
|
|
|
1964
|
-
.bcc-app-nav-item--active .bcc-nav-item-icon
|
|
1965
|
-
|
|
1966
|
-
.bcc-app-nav-item--active .bcc-nav-item-title {
|
|
1967
|
-
@apply opacity-100;
|
|
2259
|
+
.bcc-app-nav-item--active .bcc-nav-item-icon {
|
|
2260
|
+
@apply text-selected;
|
|
1968
2261
|
}
|
|
1969
2262
|
}
|
|
1970
2263
|
|
|
@@ -1981,16 +2274,16 @@
|
|
|
1981
2274
|
@apply ctx-gradient;
|
|
1982
2275
|
}
|
|
1983
2276
|
.bcc-badge.sm {
|
|
1984
|
-
@apply
|
|
2277
|
+
@apply heading-xs h-4 w-4;
|
|
1985
2278
|
}
|
|
1986
2279
|
.bcc-badge.md {
|
|
1987
|
-
@apply
|
|
2280
|
+
@apply heading-sm h-5 w-5;
|
|
1988
2281
|
}
|
|
1989
2282
|
.bcc-badge.lg {
|
|
1990
|
-
@apply
|
|
2283
|
+
@apply heading-md h-6 w-6;
|
|
1991
2284
|
}
|
|
1992
2285
|
.bcc-badge.xl {
|
|
1993
|
-
@apply
|
|
2286
|
+
@apply heading-md h-8 w-8;
|
|
1994
2287
|
}
|
|
1995
2288
|
|
|
1996
2289
|
.bcc-badge .bcc-badge-icon {
|
|
@@ -2038,57 +2331,63 @@
|
|
|
2038
2331
|
|
|
2039
2332
|
/* from ./BccCapacityIndicator/BccCapacityIndicator.css */
|
|
2040
2333
|
@layer components {
|
|
2041
|
-
|
|
2042
|
-
|
|
2043
|
-
|
|
2334
|
+
.bcc-capacity-indicator {
|
|
2335
|
+
@apply text-base;
|
|
2336
|
+
}
|
|
2044
2337
|
|
|
2045
|
-
|
|
2046
|
-
|
|
2047
|
-
|
|
2338
|
+
.bcc-capacity-indicator.xs {
|
|
2339
|
+
@apply text-xs;
|
|
2340
|
+
}
|
|
2048
2341
|
|
|
2049
|
-
|
|
2050
|
-
|
|
2051
|
-
|
|
2342
|
+
.bcc-capacity-indicator.sm {
|
|
2343
|
+
@apply text-sm;
|
|
2344
|
+
}
|
|
2052
2345
|
|
|
2053
|
-
|
|
2054
|
-
|
|
2055
|
-
|
|
2346
|
+
.bcc-capacity-indicator.lg {
|
|
2347
|
+
@apply text-xl;
|
|
2348
|
+
}
|
|
2056
2349
|
|
|
2057
|
-
|
|
2058
|
-
|
|
2059
|
-
|
|
2060
|
-
|
|
2061
|
-
|
|
2062
|
-
|
|
2063
|
-
|
|
2064
|
-
|
|
2350
|
+
.bcc-capacity-indicator {
|
|
2351
|
+
--bcc-capacity-indicator-background: transparent;
|
|
2352
|
+
--bcc-capacity-indicator-text: var(--ctx-text);
|
|
2353
|
+
--bcc-capacity-indicator-circle: var(--ctx-background);
|
|
2354
|
+
--bcc-capacity-indicator-circle-used: var(--color-brand-500);
|
|
2355
|
+
background: var(--bcc-capacity-indicator-background);
|
|
2356
|
+
@apply ctx-gray-subtlest;
|
|
2357
|
+
}
|
|
2065
2358
|
|
|
2066
|
-
|
|
2067
|
-
|
|
2068
|
-
|
|
2069
|
-
|
|
2359
|
+
.bcc-capacity-indicator.colored {
|
|
2360
|
+
--bcc-capacity-indicator-background: var(--ctx-background);
|
|
2361
|
+
--bcc-capacity-indicator-circle: var(--ctx-background-hover);
|
|
2362
|
+
--bcc-capacity-indicator-circle-used: var(--ctx-border);
|
|
2363
|
+
@apply ctx-blue-subtlest;
|
|
2364
|
+
}
|
|
2070
2365
|
|
|
2071
|
-
|
|
2072
|
-
|
|
2073
|
-
|
|
2074
|
-
|
|
2075
|
-
|
|
2076
|
-
|
|
2077
|
-
|
|
2078
|
-
|
|
2079
|
-
|
|
2366
|
+
.bcc-capacity-indicator .text {
|
|
2367
|
+
color: var(--bcc-capacity-indicator-text);
|
|
2368
|
+
}
|
|
2369
|
+
.bcc-capacity-indicator .circle {
|
|
2370
|
+
stroke: var(--bcc-capacity-indicator-circle);
|
|
2371
|
+
}
|
|
2372
|
+
.bcc-capacity-indicator .circle-used {
|
|
2373
|
+
stroke: var(--bcc-capacity-indicator-circle-used);
|
|
2374
|
+
}
|
|
2080
2375
|
|
|
2081
|
-
|
|
2082
|
-
|
|
2083
|
-
|
|
2084
|
-
|
|
2376
|
+
.bcc-capacity-indicator.is-warning {
|
|
2377
|
+
@apply ctx-yellow-subtlest;
|
|
2378
|
+
--bcc-capacity-indicator-circle-used: var(--ctx-border);
|
|
2379
|
+
}
|
|
2085
2380
|
|
|
2086
|
-
|
|
2087
|
-
|
|
2088
|
-
|
|
2381
|
+
.bcc-capacity-indicator.is-full {
|
|
2382
|
+
@apply ctx-red-subtlest;
|
|
2383
|
+
|
|
2384
|
+
--bcc-capacity-indicator-circle: var(--ctx-background);
|
|
2385
|
+
--bcc-capacity-indicator-circle-used: var(--ctx-border);
|
|
2386
|
+
}
|
|
2089
2387
|
}
|
|
2090
2388
|
|
|
2091
2389
|
|
|
2390
|
+
|
|
2092
2391
|
/* from ./BccDialKnob/BccDialKnob.css */
|
|
2093
2392
|
@layer components {
|
|
2094
2393
|
.bcc-knob {
|
|
@@ -2122,40 +2421,43 @@
|
|
|
2122
2421
|
|
|
2123
2422
|
/* from ./BccFrame/BccFrame.css */
|
|
2124
2423
|
@layer components {
|
|
2125
|
-
|
|
2126
|
-
|
|
2127
|
-
|
|
2424
|
+
.bcc-frame {
|
|
2425
|
+
@apply ctx ctx-default w-full border border-transparent;
|
|
2426
|
+
}
|
|
2128
2427
|
|
|
2129
|
-
|
|
2130
|
-
|
|
2131
|
-
|
|
2428
|
+
.bcc-frame.bcc-frame--shadow {
|
|
2429
|
+
@apply shadow-ctx shadow;
|
|
2430
|
+
}
|
|
2132
2431
|
|
|
2133
|
-
|
|
2134
|
-
|
|
2135
|
-
|
|
2136
|
-
|
|
2137
|
-
|
|
2138
|
-
|
|
2139
|
-
|
|
2140
|
-
|
|
2141
|
-
|
|
2432
|
+
.bcc-frame--raised {
|
|
2433
|
+
--ctx-background: var(--color-elevation-surface-raised-default);
|
|
2434
|
+
}
|
|
2435
|
+
.bcc-frame--rounded {
|
|
2436
|
+
@apply rounded-md;
|
|
2437
|
+
}
|
|
2438
|
+
.bcc-frame--raised.bcc-frame--shadow {
|
|
2439
|
+
@apply shadow-raised dark:border-default;
|
|
2440
|
+
}
|
|
2142
2441
|
|
|
2143
|
-
|
|
2144
|
-
|
|
2145
|
-
|
|
2146
|
-
|
|
2147
|
-
|
|
2148
|
-
|
|
2442
|
+
.bcc-frame--overlay {
|
|
2443
|
+
--ctx-background: var(--color-elevation-surface-overlay-default);
|
|
2444
|
+
@apply border;
|
|
2445
|
+
}
|
|
2446
|
+
.bcc-frame--overlay.bcc-frame--shadow {
|
|
2447
|
+
@apply shadow-overlay dark:border-default;
|
|
2448
|
+
}
|
|
2149
2449
|
|
|
2150
|
-
|
|
2151
|
-
|
|
2152
|
-
|
|
2153
|
-
|
|
2154
|
-
|
|
2155
|
-
|
|
2450
|
+
.bcc-frame--sunken {
|
|
2451
|
+
--ctx-background: var(--color-elevation-surface-sunken-default);
|
|
2452
|
+
@apply border;
|
|
2453
|
+
}
|
|
2454
|
+
.bcc-frame--sunken.bcc-frame--shadow {
|
|
2455
|
+
@apply dark:border-default shadow-inner;
|
|
2456
|
+
}
|
|
2156
2457
|
}
|
|
2157
2458
|
|
|
2158
2459
|
|
|
2460
|
+
|
|
2159
2461
|
/* from ./BccGraphic/BccGraphic.css */
|
|
2160
2462
|
@layer components {
|
|
2161
2463
|
.bcc-graphic .corner,
|
|
@@ -2259,177 +2561,180 @@
|
|
|
2259
2561
|
|
|
2260
2562
|
/* from ./BccNpsScore/BccNpsScore.css */
|
|
2261
2563
|
@layer components {
|
|
2262
|
-
|
|
2263
|
-
|
|
2264
|
-
|
|
2564
|
+
.bcc-nps-score {
|
|
2565
|
+
@apply body-sm flex min-w-70 flex-col gap-y-2 p-4 select-none;
|
|
2566
|
+
}
|
|
2265
2567
|
|
|
2266
|
-
|
|
2267
|
-
|
|
2268
|
-
|
|
2568
|
+
.bcc-nps-score--heading {
|
|
2569
|
+
@apply flex items-center justify-between;
|
|
2570
|
+
}
|
|
2269
2571
|
|
|
2270
|
-
|
|
2271
|
-
|
|
2272
|
-
|
|
2572
|
+
.bcc-nps-score--label {
|
|
2573
|
+
@apply flex-1 truncate;
|
|
2574
|
+
}
|
|
2273
2575
|
|
|
2274
|
-
|
|
2275
|
-
|
|
2276
|
-
|
|
2277
|
-
|
|
2576
|
+
.bcc-nps-score--bar {
|
|
2577
|
+
@apply pointer-events-none flex justify-evenly rounded-xl text-white;
|
|
2578
|
+
@apply bg-linear-to-r from-red-600 via-yellow-400 via-75% to-green-400;
|
|
2579
|
+
}
|
|
2278
2580
|
|
|
2279
|
-
|
|
2280
|
-
|
|
2281
|
-
|
|
2581
|
+
.bcc-nps-score--bar.reverse {
|
|
2582
|
+
@apply bg-linear-to-l;
|
|
2583
|
+
}
|
|
2282
2584
|
|
|
2283
|
-
|
|
2284
|
-
|
|
2285
|
-
|
|
2585
|
+
.bcc-nps-score--bar.disabled .bcc-nps-score--number.inactive {
|
|
2586
|
+
@apply bg-ctx ctx-gray-subtlest text-disabled;
|
|
2587
|
+
}
|
|
2286
2588
|
|
|
2287
|
-
|
|
2288
|
-
|
|
2289
|
-
|
|
2290
|
-
|
|
2291
|
-
|
|
2589
|
+
.bcc-nps-score--number {
|
|
2590
|
+
@apply border-inverse;
|
|
2591
|
+
@apply flex h-8 flex-1 items-center justify-center border-r-2 text-sm leading-none font-bold;
|
|
2592
|
+
@apply pointer-events-auto cursor-pointer transition-all duration-200 hover:bg-transparent;
|
|
2593
|
+
}
|
|
2292
2594
|
|
|
2293
|
-
|
|
2294
|
-
|
|
2295
|
-
|
|
2595
|
+
.bcc-nps-score--number:disabled {
|
|
2596
|
+
@apply cursor-not-allowed;
|
|
2597
|
+
}
|
|
2296
2598
|
|
|
2297
|
-
|
|
2298
|
-
|
|
2299
|
-
|
|
2300
|
-
|
|
2599
|
+
.bcc-nps-score--number.active {
|
|
2600
|
+
@apply pointer-events-none;
|
|
2601
|
+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
2602
|
+
}
|
|
2301
2603
|
|
|
2302
|
-
|
|
2303
|
-
|
|
2304
|
-
|
|
2604
|
+
.bcc-nps-score--number:has(~ .bcc-nps-score--number.active) {
|
|
2605
|
+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
2606
|
+
}
|
|
2305
2607
|
|
|
2306
|
-
|
|
2307
|
-
|
|
2308
|
-
|
|
2608
|
+
.bcc-nps-score--number.inactive {
|
|
2609
|
+
@apply bg-ctx text-ctx ctx-gray-subtler;
|
|
2610
|
+
}
|
|
2309
2611
|
|
|
2310
|
-
|
|
2311
|
-
|
|
2312
|
-
|
|
2313
|
-
|
|
2314
|
-
|
|
2315
|
-
|
|
2612
|
+
.bcc-nps-score--number:first-child {
|
|
2613
|
+
@apply rounded-l-xl pl-0.5;
|
|
2614
|
+
}
|
|
2615
|
+
.bcc-nps-score--number:last-child {
|
|
2616
|
+
@apply rounded-r-xl border-r-0 pr-0.5;
|
|
2617
|
+
}
|
|
2316
2618
|
}
|
|
2317
2619
|
|
|
2318
2620
|
|
|
2319
2621
|
|
|
2320
2622
|
/* from ./BccReact/BccReact.css */
|
|
2321
2623
|
@layer components {
|
|
2322
|
-
|
|
2323
|
-
|
|
2324
|
-
|
|
2325
|
-
|
|
2326
|
-
|
|
2327
|
-
|
|
2328
|
-
|
|
2329
|
-
|
|
2330
|
-
|
|
2331
|
-
|
|
2332
|
-
|
|
2333
|
-
|
|
2624
|
+
.bcc-react {
|
|
2625
|
+
@apply relative flex w-full items-center overflow-visible;
|
|
2626
|
+
}
|
|
2627
|
+
.bcc-react-toggle {
|
|
2628
|
+
@apply mr-1 flex shrink-0 cursor-pointer items-center justify-center rounded-full p-1 transition;
|
|
2629
|
+
}
|
|
2630
|
+
.bcc-react-list {
|
|
2631
|
+
@apply hide-scrollbar flex flex-1 items-center gap-1 overflow-x-auto overflow-y-hidden rounded-full p-1;
|
|
2632
|
+
}
|
|
2633
|
+
.bcc-react-empty {
|
|
2634
|
+
@apply heading-xs flex items-center;
|
|
2635
|
+
}
|
|
2334
2636
|
|
|
2335
|
-
|
|
2336
|
-
|
|
2337
|
-
|
|
2338
|
-
|
|
2637
|
+
.bcc-react-selector-container {
|
|
2638
|
+
@apply absolute z-50 h-9;
|
|
2639
|
+
@apply top-11 origin-top-left;
|
|
2640
|
+
}
|
|
2339
2641
|
|
|
2340
|
-
|
|
2341
|
-
|
|
2342
|
-
|
|
2642
|
+
.bcc-react-selector-container--top {
|
|
2643
|
+
@apply -top-10 origin-bottom-left;
|
|
2644
|
+
}
|
|
2343
2645
|
|
|
2344
|
-
|
|
2345
|
-
|
|
2346
|
-
|
|
2347
|
-
|
|
2646
|
+
.bcc-react-selector {
|
|
2647
|
+
@apply flex h-9 flex-col overflow-hidden bg-neutral-100 px-0 shadow-md;
|
|
2648
|
+
border-radius: 18px;
|
|
2649
|
+
}
|
|
2348
2650
|
|
|
2349
|
-
|
|
2350
|
-
|
|
2351
|
-
|
|
2651
|
+
.bcc-react-selector-emojis-container {
|
|
2652
|
+
@apply flex items-center bg-neutral-100 px-1;
|
|
2653
|
+
}
|
|
2352
2654
|
|
|
2353
|
-
|
|
2354
|
-
|
|
2355
|
-
|
|
2356
|
-
|
|
2357
|
-
|
|
2358
|
-
|
|
2655
|
+
.bcc-react-selector-more {
|
|
2656
|
+
@apply flex w-9 items-center justify-center;
|
|
2657
|
+
}
|
|
2658
|
+
.bcc-react-selector-more-btn {
|
|
2659
|
+
@apply flex h-7 w-7 items-center justify-center rounded-full bg-slate-200;
|
|
2660
|
+
}
|
|
2359
2661
|
|
|
2360
|
-
|
|
2361
|
-
|
|
2362
|
-
|
|
2363
|
-
|
|
2364
|
-
|
|
2365
|
-
|
|
2366
|
-
|
|
2662
|
+
.bcc-react-dropdown-container {
|
|
2663
|
+
@apply top-0 left-0 -z-10 w-full max-w-full;
|
|
2664
|
+
width: 296px;
|
|
2665
|
+
}
|
|
2666
|
+
.bcc-react-dropdown-container--top {
|
|
2667
|
+
@apply top-auto bottom-0 pb-0;
|
|
2668
|
+
}
|
|
2367
2669
|
|
|
2368
|
-
|
|
2369
|
-
|
|
2370
|
-
|
|
2670
|
+
.bcc-react-dropdown {
|
|
2671
|
+
@apply -z-10 flex w-full flex-wrap overflow-hidden px-1;
|
|
2672
|
+
}
|
|
2371
2673
|
|
|
2372
|
-
|
|
2373
|
-
|
|
2374
|
-
|
|
2375
|
-
|
|
2376
|
-
|
|
2377
|
-
|
|
2378
|
-
|
|
2674
|
+
.bcc-react-arrow-down-icon {
|
|
2675
|
+
@apply h-6 w-6 text-slate-600;
|
|
2676
|
+
transition: transform 0.3s ease;
|
|
2677
|
+
}
|
|
2678
|
+
.bcc-react-arrow-down-icon.open {
|
|
2679
|
+
transform: rotate(-180deg);
|
|
2680
|
+
}
|
|
2379
2681
|
|
|
2380
|
-
|
|
2381
|
-
|
|
2382
|
-
|
|
2682
|
+
.bcc-react-selector-item {
|
|
2683
|
+
@apply relative h-9 w-9 p-2 text-xl leading-none transition-transform duration-200 ease-out;
|
|
2684
|
+
}
|
|
2383
2685
|
|
|
2384
|
-
|
|
2385
|
-
|
|
2386
|
-
|
|
2686
|
+
.bcc-react-selector-item--clicked {
|
|
2687
|
+
animation: scaleFadeOut 300ms forwards;
|
|
2688
|
+
}
|
|
2387
2689
|
|
|
2388
|
-
|
|
2389
|
-
|
|
2390
|
-
|
|
2391
|
-
|
|
2392
|
-
|
|
2393
|
-
|
|
2394
|
-
|
|
2395
|
-
|
|
2396
|
-
|
|
2397
|
-
|
|
2690
|
+
@keyframes scaleFadeOut {
|
|
2691
|
+
0% {
|
|
2692
|
+
transform: scale(1);
|
|
2693
|
+
opacity: 1;
|
|
2694
|
+
}
|
|
2695
|
+
100% {
|
|
2696
|
+
transform: scale(1.4);
|
|
2697
|
+
opacity: 0;
|
|
2698
|
+
}
|
|
2699
|
+
}
|
|
2398
2700
|
|
|
2399
|
-
|
|
2400
|
-
|
|
2401
|
-
|
|
2402
|
-
|
|
2403
|
-
|
|
2404
|
-
|
|
2405
|
-
|
|
2406
|
-
|
|
2701
|
+
.bcc-react-emoji-list-item {
|
|
2702
|
+
@apply ctx clickable center h-7 min-w-7 shrink-0 rounded-full p-1 text-lg leading-none drop-shadow transition-all hover:scale-105;
|
|
2703
|
+
/* Default --not-selected */
|
|
2704
|
+
@apply ctx-neutral-subtlest;
|
|
2705
|
+
}
|
|
2706
|
+
.bcc-react-emoji-list-item span {
|
|
2707
|
+
@apply leading-none;
|
|
2708
|
+
}
|
|
2709
|
+
.bcc-react-emoji-list-item.selected {
|
|
2710
|
+
@apply ctx-neutral-subtle;
|
|
2711
|
+
}
|
|
2407
2712
|
}
|
|
2408
2713
|
|
|
2409
2714
|
|
|
2410
2715
|
|
|
2411
2716
|
/* from ./BccTag/BccTag.css */
|
|
2412
|
-
|
|
2413
2717
|
@layer components {
|
|
2414
2718
|
.bcc-tag.bcc-badge {
|
|
2415
2719
|
@apply w-auto;
|
|
2416
2720
|
}
|
|
2417
2721
|
.bcc-tag.bcc-badge.md {
|
|
2418
|
-
@apply
|
|
2722
|
+
@apply body-md h-6;
|
|
2419
2723
|
}
|
|
2420
2724
|
.bcc-tag.bcc-badge.sm {
|
|
2421
|
-
@apply
|
|
2725
|
+
@apply body-sm h-5;
|
|
2422
2726
|
}
|
|
2423
2727
|
.bcc-tag.bcc-badge.lg {
|
|
2424
|
-
@apply
|
|
2728
|
+
@apply body-md h-8;
|
|
2425
2729
|
}
|
|
2426
2730
|
.bcc-tag.bcc-badge.xl {
|
|
2427
|
-
@apply
|
|
2731
|
+
@apply body-lg h-10;
|
|
2428
2732
|
}
|
|
2429
2733
|
}
|
|
2430
2734
|
|
|
2431
2735
|
|
|
2432
2736
|
|
|
2737
|
+
|
|
2433
2738
|
/* === ./components/wrapped/styles.css === */
|
|
2434
2739
|
|
|
2435
2740
|
/* from ./BccAvatar/BccAvatar.css */
|