commons-shared-web-ui 0.0.23 → 0.0.24
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/index.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -0,0 +1,250 @@
|
|
|
1
|
+
/* utilities.scss */
|
|
2
|
+
|
|
3
|
+
/* Display Classes */
|
|
4
|
+
.d-flex { display: flex; }
|
|
5
|
+
.d-inline-flex { display: inline-flex; }
|
|
6
|
+
.d-grid { display: grid; }
|
|
7
|
+
.d-block { display: block; }
|
|
8
|
+
.d-none { display: none; }
|
|
9
|
+
|
|
10
|
+
/* Flexbox Directions & Wraps */
|
|
11
|
+
.flex-column { flex-direction: column; }
|
|
12
|
+
.flex-row { flex-direction: row; }
|
|
13
|
+
.flex-row-reverse { flex-direction: row-reverse; }
|
|
14
|
+
.flex-wrap { flex-wrap: wrap; }
|
|
15
|
+
.flex-1 { flex: 1; }
|
|
16
|
+
|
|
17
|
+
/* Alignments */
|
|
18
|
+
.align-items-center { align-items: center; }
|
|
19
|
+
.align-items-start { align-items: flex-start; }
|
|
20
|
+
.align-items-end { align-items: flex-end; }
|
|
21
|
+
.justify-content-center { justify-content: center; }
|
|
22
|
+
.justify-content-between { justify-content: space-between; }
|
|
23
|
+
.justify-content-start { justify-content: flex-start; }
|
|
24
|
+
.justify-content-end { justify-content: flex-end; }
|
|
25
|
+
|
|
26
|
+
/* Grid */
|
|
27
|
+
.grid-cols-12 { grid-template-columns: repeat(12, 1fr); }
|
|
28
|
+
|
|
29
|
+
/* Width & Height (Percentages) */
|
|
30
|
+
.w-100 { width: 100%; }
|
|
31
|
+
.h-100 { height: 100%; }
|
|
32
|
+
|
|
33
|
+
/* Positioning */
|
|
34
|
+
.position-relative { position: relative; }
|
|
35
|
+
.position-absolute { position: absolute; }
|
|
36
|
+
|
|
37
|
+
/* Text Alignment */
|
|
38
|
+
.text-center { text-align: center; }
|
|
39
|
+
.text-left { text-align: left; }
|
|
40
|
+
.text-right { text-align: right; }
|
|
41
|
+
|
|
42
|
+
/* Fonts */
|
|
43
|
+
.font-poppins { font-family: var(--cc-sf-font-family, 'Poppins', sans-serif); }
|
|
44
|
+
.font-weight-400 { font-weight: 400; }
|
|
45
|
+
.font-weight-500 { font-weight: 500; }
|
|
46
|
+
.font-weight-600 { font-weight: 600; }
|
|
47
|
+
|
|
48
|
+
.text-13 { font-size: 13px; }
|
|
49
|
+
.text-14 { font-size: 14px; }
|
|
50
|
+
.text-16 { font-size: 16px; }
|
|
51
|
+
|
|
52
|
+
/* Colors (from variables) */
|
|
53
|
+
.color-white { color: #ffffff; }
|
|
54
|
+
.color-dark { color: #111827; }
|
|
55
|
+
.color-gray { color: #6B7280; }
|
|
56
|
+
.color-error { color: var(--cc-sf-error-text-color, #DC2626); }
|
|
57
|
+
.bg-white { background-color: #ffffff; }
|
|
58
|
+
.bg-transparent { background-color: transparent; }
|
|
59
|
+
|
|
60
|
+
/* Margins */
|
|
61
|
+
.m-0 { margin: 0; }
|
|
62
|
+
.mt-4 { margin-top: 4px; }
|
|
63
|
+
.mt-8 { margin-top: 8px; }
|
|
64
|
+
.mt-10 { margin-top: 10px; }
|
|
65
|
+
.mt-12 { margin-top: 12px; }
|
|
66
|
+
.mt-16 { margin-top: 16px; }
|
|
67
|
+
.mt-20 { margin-top: 20px; }
|
|
68
|
+
.mt-24 { margin-top: 24px; }
|
|
69
|
+
|
|
70
|
+
.mb-0 { margin-bottom: 0px; }
|
|
71
|
+
.mb-4 { margin-bottom: 4px; }
|
|
72
|
+
.mb-8 { margin-bottom: 8px; }
|
|
73
|
+
.mb-10 { margin-bottom: 10px; }
|
|
74
|
+
.mb-12 { margin-bottom: 12px; }
|
|
75
|
+
.mb-16 { margin-bottom: 16px; }
|
|
76
|
+
.mb-20 { margin-bottom: 20px; }
|
|
77
|
+
.mb-24 { margin-bottom: 24px; }
|
|
78
|
+
|
|
79
|
+
.ml-16 { margin-left: 16px; }
|
|
80
|
+
.ml-20 { margin-left: 20px; }
|
|
81
|
+
|
|
82
|
+
/* Paddings */
|
|
83
|
+
.p-0 { padding: 0; }
|
|
84
|
+
.p-16 { padding: 16px; }
|
|
85
|
+
.p-20 { padding: 20px; }
|
|
86
|
+
.p-24 { padding: 24px; }
|
|
87
|
+
.pt-20 { padding-top: 20px; }
|
|
88
|
+
.pb-10 { padding-bottom: 10px; }
|
|
89
|
+
|
|
90
|
+
/* Gaps */
|
|
91
|
+
.gap-4 { gap: 4px; }
|
|
92
|
+
.gap-6 { gap: 6px; }
|
|
93
|
+
.gap-8 { gap: 8px; }
|
|
94
|
+
.gap-10 { gap: 10px; }
|
|
95
|
+
.gap-12 { gap: 12px; }
|
|
96
|
+
.gap-16 { gap: 16px; }
|
|
97
|
+
.gap-20 { gap: 20px; }
|
|
98
|
+
|
|
99
|
+
/* Border Radius */
|
|
100
|
+
.rounded-4 { border-radius: 4px; }
|
|
101
|
+
.rounded-6 { border-radius: 6px; }
|
|
102
|
+
.rounded-8 { border-radius: 8px; }
|
|
103
|
+
.rounded-10 { border-radius: 10px; }
|
|
104
|
+
.rounded-12 { border-radius: 12px; }
|
|
105
|
+
.rounded-20 { border-radius: 20px; }
|
|
106
|
+
.rounded-24 { border-radius: 24px; }
|
|
107
|
+
.rounded-50 { border-radius: 50%; }
|
|
108
|
+
|
|
109
|
+
/* Utilities */
|
|
110
|
+
.cursor-pointer { cursor: pointer; }
|
|
111
|
+
.overflow-hidden { overflow: hidden; }
|
|
112
|
+
.resize-vertical { resize: vertical; }
|
|
113
|
+
.box-sizing-border { box-sizing: border-box; }
|
|
114
|
+
|
|
115
|
+
/* Form Auto Extracted Utilities 2 */
|
|
116
|
+
.border-none { border: none !important; }
|
|
117
|
+
.mb-16px { margin-bottom: var(--cc-sf-grid-gap, 16px) !important; }
|
|
118
|
+
.c-DC2626 { color: var(--cc-sf-label-required-color, #DC2626) !important; }
|
|
119
|
+
.ml-0-125rem { margin-left: 0.125rem !important; }
|
|
120
|
+
.fs-0-875rem { font-size: 0.875rem !important; }
|
|
121
|
+
.c-111827 { color: var(--cc-sf-label-color, #111827) !important; }
|
|
122
|
+
.br-7px { border-radius: var(--cc-sf-input-radius, 7px) !important; }
|
|
123
|
+
.c-6B7280 { color: var(--cc-sf-hint-color, #6B7280) !important; }
|
|
124
|
+
.fs-0-75rem { font-size: var(--cc-sf-error-text-size, 0.75rem) !important; }
|
|
125
|
+
.b-none { background: none !important; }
|
|
126
|
+
.p-32px-24px { padding: 32px 24px !important; }
|
|
127
|
+
.us-none { user-select: none !important; }
|
|
128
|
+
.c-1E293B { color: var(--cc-sf-label-color, #1E293B) !important; }
|
|
129
|
+
.c-3B82F6 { color: var(--cc-sf-chip-selected-bg, #3B82F6) !important; }
|
|
130
|
+
.fs-0-78rem { font-size: 0.78rem !important; }
|
|
131
|
+
.p-10px-14px { padding: 10px 14px !important; }
|
|
132
|
+
.fs-0-85rem { font-size: 0.85rem !important; }
|
|
133
|
+
.fs-0-72rem { font-size: 0.72rem !important; }
|
|
134
|
+
.c-94A3B8 { color: #94A3B8 !important; }
|
|
135
|
+
.p-4px { padding: 4px !important; }
|
|
136
|
+
.br-8px { border-radius: var(--cc-sf-input-radius, 8px) !important; }
|
|
137
|
+
.bc-F3F4F6 { background-color: var(--cc-sf-input-disabled-bg, #F3F4F6) !important; }
|
|
138
|
+
.br-none { border-right: none !important; }
|
|
139
|
+
.bl-none { border-left: none !important; }
|
|
140
|
+
.pe-none { pointer-events: none !important; }
|
|
141
|
+
.fs-1-1rem { font-size: 1.1rem !important; }
|
|
142
|
+
.c-9CA3AF { color: var(--cc-sf-hint-color, #9CA3AF) !important; }
|
|
143
|
+
.pl-2-4rem { padding-left: 2.4rem !important; }
|
|
144
|
+
.fs-0-8125rem { font-size: 0.8125rem !important; }
|
|
145
|
+
.ls-none { list-style: none !important; }
|
|
146
|
+
.br-12px { border-radius: var(--mu-carousel-radius, 12px) !important; }
|
|
147
|
+
.b-FFFAF1 { background: var(--cc-sf-dropzone-bg, #FFFAF1) !important; }
|
|
148
|
+
.fs-18px { font-size: 18px !important; }
|
|
149
|
+
.b-FEF2F2 { background: var(--cc-sf-error-bg, #FEF2F2) !important; }
|
|
150
|
+
|
|
151
|
+
/* Form Auto Extracted Utilities 3 */
|
|
152
|
+
.bc-DC2626 { border-color: var(--cc-sf-error-border, #DC2626) !important; }
|
|
153
|
+
.c-202124 { color: var(--cc-sf-label-color, #202124) !important; }
|
|
154
|
+
.fs-18px { font-size: var(--cc-sf-label-size, 18px) !important; }
|
|
155
|
+
.mb-0-5rem { margin-bottom: 0.5rem !important; }
|
|
156
|
+
.pt-0-625rem { padding-top: var(--cc-sf-input-padding-y, 0.625rem) !important; }
|
|
157
|
+
.pb-0-625rem { padding-bottom: var(--cc-sf-input-padding-y, 0.625rem) !important; }
|
|
158
|
+
.pl-16px { padding-left: var(--cc-sf-input-padding-x, 16px) !important; }
|
|
159
|
+
.pr-16px { padding-right: var(--cc-sf-input-padding-x, 16px) !important; }
|
|
160
|
+
.bc-ffffff { background-color: var(--cc-sf-section-bg, #ffffff) !important; }
|
|
161
|
+
.b-1px-solid-D1D5DB { border: 1px solid var(--cc-sf-input-border, #D1D5DB) !important; }
|
|
162
|
+
.fs-0-75rem { font-size: 0.75rem !important; }
|
|
163
|
+
.c-1F2937 { color: var(--cc-sf-section-label-color, #1F2937) !important; }
|
|
164
|
+
.p-6px-14px { padding: var(--cc-sf-chip-padding, 6px 14px) !important; }
|
|
165
|
+
.b-ffffff { background: var(--loc-suggestion-bg, #ffffff) !important; }
|
|
166
|
+
.c-374151 { color: var(--cc-sf-label-color, #374151) !important; }
|
|
167
|
+
.br-20px { border-radius: var(--cc-sf-chip-radius, 20px) !important; }
|
|
168
|
+
.fs-0-875rem { font-size: var(--cc-sf-btn-font-size, 0.875rem) !important; }
|
|
169
|
+
.bc-D1D5DB { background-color: var(--cc-sf-switch-track-off, #D1D5DB) !important; }
|
|
170
|
+
.pr-2-75rem { padding-right: 2.75rem !important; }
|
|
171
|
+
.p-0-25rem { padding: 0.25rem !important; }
|
|
172
|
+
.p-0-625rem-0-875rem { padding: var(--cc-sf-generated-padding, 0.625rem 0.875rem) !important; }
|
|
173
|
+
.b-F3F4F6 { background: var(--cc-sf-generated-bg, #F3F4F6) !important; }
|
|
174
|
+
.b-1px-solid-E5E7EB { border: 1px solid var(--cc-sf-input-disabled-border, #E5E7EB) !important; }
|
|
175
|
+
.br-8px { border-radius: var(--cc-sf-uploaded-item-radius, 8px) !important; }
|
|
176
|
+
.c-6B7280 { color: var(--ms-desc-color, #6B7280) !important; }
|
|
177
|
+
.mb-20px { margin-bottom: var(--cc-sf-section-gap, 20px) !important; }
|
|
178
|
+
.br-10px { border-radius: var(--cc-sf-input-radius, 10px) !important; }
|
|
179
|
+
.p-20px { padding: var(--cc-sf-section-padding, 20px) !important; }
|
|
180
|
+
.fs-1rem { font-size: 1rem !important; }
|
|
181
|
+
.m-0-0-16px-0 { margin: 0 0 16px 0 !important; }
|
|
182
|
+
.bb-2px-solid-E5E7EB { border-bottom: var(--cc-sf-section-label-border, 2px solid #E5E7EB) !important; }
|
|
183
|
+
.p-16px { padding: var(--cc-sf-instance-padding, 16px) !important; }
|
|
184
|
+
.b-F9FAFB { background: var(--loc-tba-bg, #F9FAFB) !important; }
|
|
185
|
+
.bb-1px-dashed-D1D5DB { border-bottom: var(--cc-sf-instance-divider, 1px dashed #D1D5DB) !important; }
|
|
186
|
+
.c-4B5563 { color: var(--cc-sf-instance-num-color, #4B5563) !important; }
|
|
187
|
+
.fs-0-8125rem { font-size: var(--cc-sf-hint-size, 0.8125rem) !important; }
|
|
188
|
+
.pb-0 { padding-bottom: 0 !important; }
|
|
189
|
+
.p-18px-24px { padding: 18px 24px !important; }
|
|
190
|
+
.c-111827 { color: var(--ms-title-color, #111827) !important; }
|
|
191
|
+
.bt-1px-solid-E5E7EB { border-top: 1px solid #E5E7EB !important; }
|
|
192
|
+
.p-4px-10px { padding: 4px 10px !important; }
|
|
193
|
+
.b-FFF5F5 { background: var(--cc-sf-btn-remove-bg, #FFF5F5) !important; }
|
|
194
|
+
.c-E53E3E { color: var(--loc-delete-color, #E53E3E) !important; }
|
|
195
|
+
.b-1px-solid-FED7D7 { border: var(--cc-sf-btn-remove-border, 1px solid #FED7D7) !important; }
|
|
196
|
+
.br-4px { border-radius: var(--cc-sf-btn-remove-radius, 4px) !important; }
|
|
197
|
+
.p-8px-16px { padding: 8px 16px !important; }
|
|
198
|
+
.b-transparent { background: var(--cc-sf-btn-add-bg, transparent) !important; }
|
|
199
|
+
.c-3B82F6 { color: var(--cc-sf-input-focus-border, #3B82F6) !important; }
|
|
200
|
+
.b-1px-dashed-CBD5E1 { border: var(--cc-sf-btn-add-border, 1px dashed #CBD5E1) !important; }
|
|
201
|
+
.br-6px { border-radius: var(--cc-sf-btn-add-radius, 6px) !important; }
|
|
202
|
+
.b-1-5px-dashed-CBD5E1 { border: var(--cc-sf-dropzone-border, 1.5px dashed #CBD5E1) !important; }
|
|
203
|
+
.br-12px { border-radius: var(--cc-sf-dropzone-radius, 12px) !important; }
|
|
204
|
+
.bc-FFFAF1 { background-color: var(--cc-sf-dropzone-bg, #FFFAF1) !important; }
|
|
205
|
+
.c-94A3B8 { color: var(--cc-sf-uploaded-remove-color, #94A3B8) !important; }
|
|
206
|
+
.fs-0-9rem { font-size: var(--cc-sf-input-font-size, 0.9rem) !important; }
|
|
207
|
+
.c-64748B { color: var(--cc-sf-dropzone-hint-color, #64748B) !important; }
|
|
208
|
+
.b-1px-solid-E2E8F0 { border: var(--cc-sf-uploaded-item-border, 1px solid #E2E8F0) !important; }
|
|
209
|
+
.b-2px-solid-E2E8F0 { border: 2px solid #E2E8F0 !important; }
|
|
210
|
+
.pr-3-5rem { padding-right: 3.5rem !important; }
|
|
211
|
+
.p-0-0-875rem { padding: 0 0.875rem !important; }
|
|
212
|
+
.bc-FFFFFF { background-color: var(--cc-sf-input-bg, #FFFFFF) !important; }
|
|
213
|
+
.b-1-5px-solid-D1D5DB { border: var(--cc-sf-input-border, 1.5px solid #D1D5DB) !important; }
|
|
214
|
+
.mb-0-75rem { margin-bottom: 0.75rem !important; }
|
|
215
|
+
.mt-6px { margin-top: 6px !important; }
|
|
216
|
+
.pr-2-4rem { padding-right: 2.4rem !important; }
|
|
217
|
+
.p-0-2rem { padding: 0.2rem !important; }
|
|
218
|
+
.fs-1-35rem { font-size: 1.35rem !important; }
|
|
219
|
+
.p-4px-12px { padding: 4px 12px !important; }
|
|
220
|
+
.b-111827 { background: var(--cc-sf-label-color, #111827) !important; }
|
|
221
|
+
.b-2px-dashed-CBD5E1 { border: 2px dashed var(--cc-sf-dropzone-border, #CBD5E1) !important; }
|
|
222
|
+
.fs-52px { font-size: 52px !important; }
|
|
223
|
+
.p-12px-16px { padding: 12px 16px !important; }
|
|
224
|
+
.bb-1px-solid-F3F4F6 { border-bottom: 1px solid var(--cc-sf-input-disabled-border, #F3F4F6) !important; }
|
|
225
|
+
.b-0F172A { background: var(--mu-carousel-bg, #0F172A) !important; }
|
|
226
|
+
.b-3px-solid-rgba-255-255-255-0-15 { border: 3px solid rgba(255, 255, 255, 0.15) !important; }
|
|
227
|
+
.b-rgba-255-255-255-0-85 { background: rgba(255, 255, 255, 0.85) !important; }
|
|
228
|
+
.b-rgba-0-0-0-0-55 { background: rgba(0, 0, 0, 0.55) !important; }
|
|
229
|
+
.b-rgba-255-255-255-0-45 { background: rgba(255, 255, 255, 0.45) !important; }
|
|
230
|
+
.pb-4px { padding-bottom: 4px !important; }
|
|
231
|
+
.b-2px-solid-transparent { border: 2px solid transparent !important; }
|
|
232
|
+
.b-E2E8F0 { background: var(--mu-thumb-bg, #E2E8F0) !important; }
|
|
233
|
+
.b-1E293B { background: #1E293B !important; }
|
|
234
|
+
.c-EF4444 { color: #EF4444 !important; }
|
|
235
|
+
.b-rgba-0-0-0-0-5 { background: rgba(0, 0, 0, 0.5) !important; }
|
|
236
|
+
.br-16px { border-radius: var(--mu-modal-radius, 16px) !important; }
|
|
237
|
+
.p-24px-28px { padding: 24px 28px !important; }
|
|
238
|
+
.bb-1px-solid-E5E7EB { border-bottom: 1px solid var(--cc-sf-input-disabled-border, #E5E7EB) !important; }
|
|
239
|
+
.fs-1-25rem { font-size: 1.25rem !important; }
|
|
240
|
+
.p-48px-24px { padding: 48px 24px !important; }
|
|
241
|
+
.b-3px-solid-E2E8F0 { border: 3px solid #E2E8F0 !important; }
|
|
242
|
+
.p-16px-24px { padding: 16px 24px !important; }
|
|
243
|
+
.p-28px { padding: 28px !important; }
|
|
244
|
+
.b-3px-solid-transparent { border: 3px solid transparent !important; }
|
|
245
|
+
.b-rgba-59-130-246-0-12 { background: rgba(59, 130, 246, 0.12) !important; }
|
|
246
|
+
.p-20px-28px { padding: 20px 28px !important; }
|
|
247
|
+
.c-1A56DB { color: var(--loc-add-color, #1A56DB) !important; }
|
|
248
|
+
.b-1px-dashed-D1D5DB { border: 1px dashed var(--cc-sf-input-disabled-border, #D1D5DB) !important; }
|
|
249
|
+
.fs-40px { font-size: 40px !important; }
|
|
250
|
+
.c-9CA3AF { color: var(--loc-tba-icon-color, #9CA3AF) !important; }
|