hds-web 1.3.6 → 1.3.8
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/index.css +2 -2
- package/dist/index.es.css +2 -2
- package/dist/index.es.js +6 -6
- package/dist/index.js +6 -6
- package/package.json +1 -1
- package/src/HDS/components/Avatars/hasConAv.js +4 -4
- package/src/HDS/components/Avatars/profileAvatar.js +2 -2
- package/src/HDS/components/Buttons/button.js +2 -2
- package/src/HDS/components/Cards/Link/link.js +1 -1
- package/src/HDS/components/Cards/Misc/talkcard2.js +46 -47
- package/src/HDS/components/Cards/TalkDetailCard/talkDetailCard.js +19 -13
- package/src/HDS/components/Carousels/carouselCard.js +19 -7
- package/src/HDS/components/Hero/h3.js +6 -6
- package/src/HDS/components/Tables/index.js +2 -1
- package/src/HDS/components/Tables/tableD.js +427 -0
- package/src/styles/tailwind.css +119 -0
@@ -0,0 +1,427 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { useState } from 'react';
|
3
|
+
import { Typography } from '../../foundation/Typography'
|
4
|
+
import { Icon } from '../common-components/Icon'
|
5
|
+
import { HDSColor } from '../../foundation/ColorPalette';
|
6
|
+
import { Tab } from '../Tabs'
|
7
|
+
import ReactMarkdown from "react-markdown";
|
8
|
+
import { HDSButton } from '../Buttons'
|
9
|
+
const tabs = [
|
10
|
+
{ name: 'Level 1', href: '', current: true },
|
11
|
+
{ name: 'Level 2', href: '', current: false },
|
12
|
+
]
|
13
|
+
|
14
|
+
|
15
|
+
|
16
|
+
const levelCalc = (arr, index) => {
|
17
|
+
|
18
|
+
const keyIndex = 'key' + `${index}`;
|
19
|
+
|
20
|
+
if (arr[keyIndex] && (arr[keyIndex]['text'] || arr[keyIndex]['iconVariant'])) {
|
21
|
+
return (
|
22
|
+
<>
|
23
|
+
<div className='flex gap-4 p-4 w-full'>
|
24
|
+
{(arr[keyIndex]['text'] || arr[keyIndex]['iconVariant']) && (
|
25
|
+
<Icon height='h-5 w-5 stroke-[1.5px]' variant='checkcircle' strokeClass='stroke-green-500' />
|
26
|
+
)
|
27
|
+
}
|
28
|
+
<>
|
29
|
+
<Typography textStyle='body1c'
|
30
|
+
className='text-neutral-700 [&>span]:pb-2 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 [&>ul>li]:last:pb-0'>
|
31
|
+
|
32
|
+
{arr[keyIndex]['text'] && arr[keyIndex]['text'] !== null && (
|
33
|
+
<>
|
34
|
+
{`${arr[keyIndex]['text']} `}
|
35
|
+
</>
|
36
|
+
)
|
37
|
+
}
|
38
|
+
{arr['rowTitle'] && (arr[keyIndex]['text'] || arr[keyIndex]['iconVariant']) && (
|
39
|
+
<>
|
40
|
+
<ReactMarkdown components={{ p: 'span' }}>
|
41
|
+
{`${arr['rowTitle']}`}
|
42
|
+
</ReactMarkdown>
|
43
|
+
</>
|
44
|
+
|
45
|
+
)}
|
46
|
+
</Typography>
|
47
|
+
</>
|
48
|
+
|
49
|
+
</div>
|
50
|
+
|
51
|
+
</>
|
52
|
+
)
|
53
|
+
}
|
54
|
+
|
55
|
+
}
|
56
|
+
|
57
|
+
export default function TableB(props) {
|
58
|
+
const {
|
59
|
+
title,
|
60
|
+
title_color,
|
61
|
+
description,
|
62
|
+
desc_color,
|
63
|
+
TABLE_VALUE,
|
64
|
+
TABLE_HEADER,
|
65
|
+
} = props;
|
66
|
+
const [activeTab, setActiveTab] = useState(1);
|
67
|
+
console.log(TABLE_VALUE, TABLE_VALUE[0], 'hh');
|
68
|
+
|
69
|
+
const tableValuesm = (section, keyIndex) =>
|
70
|
+
(
|
71
|
+
<>
|
72
|
+
{section[keyIndex].map((value, index) => (
|
73
|
+
<tr className='divide-x divide-neutral-200' key={index}>
|
74
|
+
{Object.keys(value).map((keyIndex) => (
|
75
|
+
|
76
|
+
<React.Fragment key={index + keyIndex}>
|
77
|
+
{keyIndex !== null && keyIndex === 'rowTitle' && (<td
|
78
|
+
|
79
|
+
className="px-8 py-7 w-[22.5rem]"
|
80
|
+
>
|
81
|
+
<Typography className='max-w-[22rem] text-neutral-700 [&>p]:pb-2 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 [&>ul>li]:last:pb-0' textStyle='body1c'><ReactMarkdown>{value[keyIndex]}</ReactMarkdown></Typography>
|
82
|
+
|
83
|
+
</td>)}
|
84
|
+
|
85
|
+
{keyIndex !== null && keyIndex !== 'rowTitle' && value[keyIndex] !== null && (
|
86
|
+
<td
|
87
|
+
|
88
|
+
className="px-8 py-7 border-table text-center "
|
89
|
+
>
|
90
|
+
{value && keyIndex && value[keyIndex] && value[keyIndex]['text'] === null && !value[keyIndex]['iconVariant'] && value[keyIndex]['iconVariant'] === null && (
|
91
|
+
<></>
|
92
|
+
|
93
|
+
)}
|
94
|
+
{value[keyIndex]['text'] !== null && value[keyIndex]['text'] && (
|
95
|
+
<Typography className='text-neutral-700' textStyle='body1c'>{value[keyIndex]['text']}</Typography>
|
96
|
+
|
97
|
+
)}
|
98
|
+
{(value[keyIndex]['text'] === null || !value[keyIndex]['text']) && value[keyIndex]['iconVariant'] && (
|
99
|
+
<div className='flex justify-center'>
|
100
|
+
<Icon height='h-5 w-5 stroke-[1.5px]' variant={value[keyIndex]['iconVariant']} strokeClass={HDSColor(value[keyIndex]['iconStrokeClass'])} />
|
101
|
+
</div>
|
102
|
+
)}
|
103
|
+
</td>)
|
104
|
+
}
|
105
|
+
|
106
|
+
{keyIndex === null && (
|
107
|
+
<td
|
108
|
+
key={index}
|
109
|
+
className="px-8 py-7 border-table text-center"
|
110
|
+
>
|
111
|
+
</td>
|
112
|
+
)}
|
113
|
+
|
114
|
+
|
115
|
+
</React.Fragment>
|
116
|
+
))}
|
117
|
+
</tr>
|
118
|
+
))}
|
119
|
+
</>
|
120
|
+
|
121
|
+
)
|
122
|
+
|
123
|
+
|
124
|
+
|
125
|
+
|
126
|
+
function handleTabClick(tab) {
|
127
|
+
if (tab.name === 'Level 1') setActiveTab(1);
|
128
|
+
if (tab.name === 'Level 2') setActiveTab(2);
|
129
|
+
if (tab.name === 'Level 3') setActiveTab(3);
|
130
|
+
// Perform any other actions based on the clicked tab
|
131
|
+
}
|
132
|
+
|
133
|
+
return (
|
134
|
+
<div className=" max-w-7xl px-4 sm:px-6 lg:px-8 ">
|
135
|
+
<div className=" flex justify-around ">
|
136
|
+
<div className="w-full flex-col items-center flex justify-around tb-l:flex tb-l:flex-col tb-l:items-center">
|
137
|
+
<div>
|
138
|
+
{title && (
|
139
|
+
<Typography
|
140
|
+
textStyle='h3'
|
141
|
+
className={HDSColor(title_color)}
|
142
|
+
>
|
143
|
+
{title}
|
144
|
+
</Typography>
|
145
|
+
)}
|
146
|
+
{description && (
|
147
|
+
<Typography
|
148
|
+
textStyle='body1c'
|
149
|
+
className={HDSColor(desc_color)}
|
150
|
+
>
|
151
|
+
{description}
|
152
|
+
</Typography>
|
153
|
+
)}
|
154
|
+
</div>
|
155
|
+
<div className=' mt-11 rounded-full shadow tb-l:hidden'>
|
156
|
+
<Tab onTabClick={handleTabClick} tabs={tabs} />
|
157
|
+
</div>
|
158
|
+
</div>
|
159
|
+
|
160
|
+
</div>
|
161
|
+
|
162
|
+
{/* code for mobile */}
|
163
|
+
|
164
|
+
<div className='tb-l:hidden'>
|
165
|
+
<div className="mt-8 bg-neutral-0 rounded-3xl ">
|
166
|
+
<div className=" shadow rounded-3xl ">
|
167
|
+
|
168
|
+
<div className='flex border-x px-8 py-[1.625rem] border-neutral-200 rounded-t-3xl flex-col justify-center items-center text-center'>
|
169
|
+
<div className={'flex items-center gap-2'}>
|
170
|
+
{TABLE_HEADER[activeTab]['icon'] &&
|
171
|
+
(
|
172
|
+
<Icon
|
173
|
+
height='h-6 w-6'
|
174
|
+
variant={TABLE_HEADER[activeTab]['icon']}
|
175
|
+
strokeClass={TABLE_HEADER[activeTab]['iconStrokeClass']} />
|
176
|
+
)
|
177
|
+
}
|
178
|
+
{
|
179
|
+
TABLE_HEADER[activeTab]['title'] && activeTab == 0 && (
|
180
|
+
<Typography
|
181
|
+
textStyle='h5'
|
182
|
+
className={TABLE_HEADER[activeTab]['title_text_color']}>
|
183
|
+
{`${TABLE_HEADER[activeTab]['title']}`}
|
184
|
+
</Typography>)
|
185
|
+
}
|
186
|
+
{
|
187
|
+
TABLE_HEADER[activeTab]['title'] && activeTab != 0 && (
|
188
|
+
<Typography
|
189
|
+
textStyle='h5'
|
190
|
+
className={TABLE_HEADER[activeTab]['title_text_color']}>
|
191
|
+
{`${TABLE_HEADER[activeTab]['title']}`}
|
192
|
+
</Typography>)
|
193
|
+
}
|
194
|
+
|
195
|
+
|
196
|
+
</div>
|
197
|
+
<div className=' max-w-[10rem]'>
|
198
|
+
{TABLE_HEADER[activeTab]['descr'] && (
|
199
|
+
<Typography
|
200
|
+
textStyle='body1'
|
201
|
+
className={TABLE_HEADER[activeTab]['descr_text_color']}>
|
202
|
+
{`${TABLE_HEADER[activeTab]['descr']}`}
|
203
|
+
</Typography>)}
|
204
|
+
</div>
|
205
|
+
</div>
|
206
|
+
|
207
|
+
<div className="divide-y divide-neutral-200 rounded-b-3xl">
|
208
|
+
<div className='flex flex-col border border-neutral-200 divide-y divide-neutral-200 rounded-b-3xl items-center'>
|
209
|
+
<div className='flex divide-y divide-neutral-200 flex-col w-full gap-2 items-start'>
|
210
|
+
{TABLE_VALUE.map((msection, index) => (
|
211
|
+
<React.Fragment key={index}>
|
212
|
+
{Object.keys(msection).map((keyIndex) => (
|
213
|
+
|
214
|
+
<>
|
215
|
+
{msection[keyIndex].map((tem2, index) =>(
|
216
|
+
<>
|
217
|
+
{levelCalc(tem2,index)}
|
218
|
+
</>
|
219
|
+
))
|
220
|
+
|
221
|
+
}
|
222
|
+
|
223
|
+
|
224
|
+
|
225
|
+
</>
|
226
|
+
))}
|
227
|
+
|
228
|
+
|
229
|
+
</React.Fragment>
|
230
|
+
))}
|
231
|
+
</div>
|
232
|
+
</div>
|
233
|
+
|
234
|
+
</div>
|
235
|
+
</div>
|
236
|
+
</div>
|
237
|
+
</div>
|
238
|
+
|
239
|
+
{/* code for mobile */}
|
240
|
+
|
241
|
+
<div className='hidden tb-l:block' >
|
242
|
+
<div className="mt-12 rounded-3xl ">
|
243
|
+
<table className="min-w-full shadow tableclss rounded-3xl ">
|
244
|
+
<thead>
|
245
|
+
<tr className=' text-center rounded-t-3xl'>
|
246
|
+
{Object.keys(TABLE_HEADER).map((key, index) => (
|
247
|
+
<th
|
248
|
+
key={index}
|
249
|
+
scope="col"
|
250
|
+
className="px-8 py-6 sm:table-cell"
|
251
|
+
>
|
252
|
+
<div className=''>
|
253
|
+
<div className='flex flex-col justify-center items-center text-center'>
|
254
|
+
<div className={'flex items-center gap-2'}>
|
255
|
+
{TABLE_HEADER[key]['icon'] &&
|
256
|
+
(
|
257
|
+
<Icon
|
258
|
+
height='h-6 w-6 stroke-[1.5px]'
|
259
|
+
variant={TABLE_HEADER[key]['icon']}
|
260
|
+
strokeClass={HDSColor(TABLE_HEADER[key]['iconStrokeClass'])} />
|
261
|
+
)
|
262
|
+
}
|
263
|
+
{
|
264
|
+
TABLE_HEADER[key]['title'] && key == 0 && (
|
265
|
+
<Typography
|
266
|
+
textStyle='h5'
|
267
|
+
className={HDSColor(TABLE_HEADER[key]['title_text_color'])}>
|
268
|
+
{TABLE_HEADER[key]['title']}
|
269
|
+
</Typography>)
|
270
|
+
}
|
271
|
+
{
|
272
|
+
TABLE_HEADER[key]['title'] && key != 0 && (
|
273
|
+
<Typography
|
274
|
+
textStyle='h5'
|
275
|
+
className={HDSColor(TABLE_HEADER[key]['title_text_color'])}>
|
276
|
+
<ReactMarkdown>{TABLE_HEADER[key]['title']}</ReactMarkdown>
|
277
|
+
</Typography>)
|
278
|
+
}
|
279
|
+
</div>
|
280
|
+
<div className=' max-w-[10rem]'>
|
281
|
+
{TABLE_HEADER[key]['descr'] && (
|
282
|
+
<Typography
|
283
|
+
textStyle='body1'
|
284
|
+
className={HDSColor(TABLE_HEADER[key]['descr_text_color'])}>
|
285
|
+
{TABLE_HEADER[key]['descr']}
|
286
|
+
</Typography>)}
|
287
|
+
|
288
|
+
{TABLE_HEADER[key]['button_title'] &&
|
289
|
+
(
|
290
|
+
<HDSButton
|
291
|
+
label={TABLE_HEADER[key]['button_title']}
|
292
|
+
type='secondary'
|
293
|
+
leftIconVariant='none'
|
294
|
+
rightIconVariant='none'
|
295
|
+
state='default'
|
296
|
+
size='sm'
|
297
|
+
rightAnimatedArrow={true}
|
298
|
+
rightAnimatedArrowColor='#6C737F'
|
299
|
+
className='mt-4'
|
300
|
+
/>
|
301
|
+
|
302
|
+
)
|
303
|
+
|
304
|
+
}
|
305
|
+
</div>
|
306
|
+
</div>
|
307
|
+
</div>
|
308
|
+
</th>
|
309
|
+
))}
|
310
|
+
</tr>
|
311
|
+
</thead>
|
312
|
+
{TABLE_VALUE.map((section, index) => (
|
313
|
+
<tbody key={index} className="divide-y divide-neutral-200">
|
314
|
+
|
315
|
+
|
316
|
+
{Object.keys(section).map((keyIndex) => (
|
317
|
+
<>
|
318
|
+
<tr className=''>
|
319
|
+
{Object.keys(section[keyIndex][0]).map((keyIndex2) => (
|
320
|
+
<React.Fragment key={keyIndex2}>
|
321
|
+
{keyIndex2 !== null && (
|
322
|
+
<th
|
323
|
+
className='bg-neutral-100 first:rounded-l-full last:rounded-r-full'
|
324
|
+
>
|
325
|
+
<Typography textStyle='h5' className='text-neutral-900'>
|
326
|
+
|
327
|
+
{ keyIndex2 }
|
328
|
+
</Typography>
|
329
|
+
|
330
|
+
|
331
|
+
</th>
|
332
|
+
)}
|
333
|
+
</React.Fragment>
|
334
|
+
))}
|
335
|
+
</tr>
|
336
|
+
|
337
|
+
|
338
|
+
|
339
|
+
{tableValuesm(section, keyIndex)}
|
340
|
+
</>
|
341
|
+
|
342
|
+
|
343
|
+
|
344
|
+
|
345
|
+
))
|
346
|
+
}
|
347
|
+
|
348
|
+
|
349
|
+
</tbody>
|
350
|
+
|
351
|
+
))
|
352
|
+
|
353
|
+
}
|
354
|
+
{/* <tbody className="divide-y divide-neutral-200">
|
355
|
+
<tr className=''>
|
356
|
+
{Object.keys(TABLE_VALUE[0]).map((keyIndex) => (
|
357
|
+
<th
|
358
|
+
className='bg-neutral-100 first:rounded-l-full last:rounded-r-full'
|
359
|
+
>
|
360
|
+
<Typography textStyle='h5' className='text-neutral-900'>
|
361
|
+
{keyIndex}
|
362
|
+
</Typography>
|
363
|
+
</th>
|
364
|
+
))
|
365
|
+
}
|
366
|
+
</tr>
|
367
|
+
|
368
|
+
{TABLE_VALUE.map((value, index) => (
|
369
|
+
<tr className='' key={index}>
|
370
|
+
{Object.keys(value).map((keyIndex) => (
|
371
|
+
|
372
|
+
<React.Fragment key={index + keyIndex}>
|
373
|
+
{keyIndex !== null && keyIndex === 'rowTitle' && (<td
|
374
|
+
|
375
|
+
className="px-8 py-7 w-[22.5rem]"
|
376
|
+
>
|
377
|
+
<Typography className='max-w-[22rem] text-neutral-700 [&>p]:pb-2 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 [&>ul>li]:last:pb-0' textStyle='body1c'><ReactMarkdown>{value[keyIndex]}</ReactMarkdown></Typography>
|
378
|
+
|
379
|
+
</td>)}
|
380
|
+
|
381
|
+
{keyIndex !== null && keyIndex !== 'rowTitle' && value[keyIndex] !== null && (
|
382
|
+
<td
|
383
|
+
|
384
|
+
className="px-8 py-7 border-table text-center "
|
385
|
+
>
|
386
|
+
{value && keyIndex && value[keyIndex] && value[keyIndex]['text'] === null && !value[keyIndex]['iconVariant'] && value[keyIndex]['iconVariant'] === null && (
|
387
|
+
<></>
|
388
|
+
|
389
|
+
)}
|
390
|
+
{value[keyIndex]['text'] !== null && value[keyIndex]['text'] && (
|
391
|
+
<Typography className='text-neutral-700' textStyle='body1c'>{value[keyIndex]['text']}</Typography>
|
392
|
+
|
393
|
+
)}
|
394
|
+
{(value[keyIndex]['text'] === null || !value[keyIndex]['text']) && value[keyIndex]['iconVariant'] && (
|
395
|
+
<div className='flex justify-center'>
|
396
|
+
<Icon height='h-5 w-5 stroke-[1.5px]' variant={value[keyIndex]['iconVariant']} strokeClass={HDSColor(value[keyIndex]['iconStrokeClass'])} />
|
397
|
+
</div>
|
398
|
+
)}
|
399
|
+
</td>)
|
400
|
+
}
|
401
|
+
|
402
|
+
{keyIndex === null && (
|
403
|
+
<td
|
404
|
+
key={index}
|
405
|
+
className="px-8 py-7 border-table text-center"
|
406
|
+
>
|
407
|
+
</td>
|
408
|
+
)}
|
409
|
+
|
410
|
+
|
411
|
+
</React.Fragment>
|
412
|
+
))}
|
413
|
+
</tr>
|
414
|
+
))}
|
415
|
+
</tbody> */}
|
416
|
+
|
417
|
+
</table>
|
418
|
+
</div>
|
419
|
+
</div>
|
420
|
+
</div>
|
421
|
+
)
|
422
|
+
}
|
423
|
+
|
424
|
+
TableB.defaultProps = {
|
425
|
+
title_color: 'text-blue-800',
|
426
|
+
desc_color: 'text-blue-600'
|
427
|
+
}
|
package/src/styles/tailwind.css
CHANGED
@@ -1408,6 +1408,10 @@ select {
|
|
1408
1408
|
min-height: 96px;
|
1409
1409
|
}
|
1410
1410
|
|
1411
|
+
.min-h-\[116px\] {
|
1412
|
+
min-height: 116px;
|
1413
|
+
}
|
1414
|
+
|
1411
1415
|
.w-1\/2 {
|
1412
1416
|
width: 50%;
|
1413
1417
|
}
|
@@ -1564,6 +1568,14 @@ select {
|
|
1564
1568
|
min-width: 100%;
|
1565
1569
|
}
|
1566
1570
|
|
1571
|
+
.min-w-\[144px\] {
|
1572
|
+
min-width: 144px;
|
1573
|
+
}
|
1574
|
+
|
1575
|
+
.min-w-\[11\.25rem\] {
|
1576
|
+
min-width: 11.25rem;
|
1577
|
+
}
|
1578
|
+
|
1567
1579
|
.max-w-2xl {
|
1568
1580
|
max-width: 42rem;
|
1569
1581
|
}
|
@@ -1622,6 +1634,10 @@ select {
|
|
1622
1634
|
max-width: min-content;
|
1623
1635
|
}
|
1624
1636
|
|
1637
|
+
.max-w-\[22\.313rem\] {
|
1638
|
+
max-width: 22.313rem;
|
1639
|
+
}
|
1640
|
+
|
1625
1641
|
.flex-1 {
|
1626
1642
|
flex: 1 1 0%;
|
1627
1643
|
}
|
@@ -2050,10 +2066,18 @@ select {
|
|
2050
2066
|
overflow: hidden;
|
2051
2067
|
}
|
2052
2068
|
|
2069
|
+
.overflow-clip {
|
2070
|
+
overflow: clip;
|
2071
|
+
}
|
2072
|
+
|
2053
2073
|
.overflow-visible {
|
2054
2074
|
overflow: visible;
|
2055
2075
|
}
|
2056
2076
|
|
2077
|
+
.overflow-scroll {
|
2078
|
+
overflow: scroll;
|
2079
|
+
}
|
2080
|
+
|
2057
2081
|
.overflow-y-auto {
|
2058
2082
|
overflow-y: auto;
|
2059
2083
|
}
|
@@ -2156,6 +2180,16 @@ select {
|
|
2156
2180
|
border-top-right-radius: 0.375rem;
|
2157
2181
|
}
|
2158
2182
|
|
2183
|
+
.rounded-l {
|
2184
|
+
border-top-left-radius: 0.25rem;
|
2185
|
+
border-bottom-left-radius: 0.25rem;
|
2186
|
+
}
|
2187
|
+
|
2188
|
+
.rounded-l-full {
|
2189
|
+
border-top-left-radius: 9999px;
|
2190
|
+
border-bottom-left-radius: 9999px;
|
2191
|
+
}
|
2192
|
+
|
2159
2193
|
.rounded-tl-2xl {
|
2160
2194
|
border-top-left-radius: 1rem;
|
2161
2195
|
}
|
@@ -5468,6 +5502,14 @@ select {
|
|
5468
5502
|
padding-top: 1.5rem;
|
5469
5503
|
}
|
5470
5504
|
|
5505
|
+
.pr-0 {
|
5506
|
+
padding-right: 0px;
|
5507
|
+
}
|
5508
|
+
|
5509
|
+
.pt-8 {
|
5510
|
+
padding-top: 2rem;
|
5511
|
+
}
|
5512
|
+
|
5471
5513
|
.text-left {
|
5472
5514
|
text-align: left;
|
5473
5515
|
}
|
@@ -7424,15 +7466,53 @@ select {
|
|
7424
7466
|
margin-left: 0px;
|
7425
7467
|
}
|
7426
7468
|
|
7469
|
+
.first\:rounded-full:first-child {
|
7470
|
+
border-radius: 9999px;
|
7471
|
+
}
|
7472
|
+
|
7473
|
+
.first\:rounded-r-full:first-child {
|
7474
|
+
border-top-right-radius: 9999px;
|
7475
|
+
border-bottom-right-radius: 9999px;
|
7476
|
+
}
|
7477
|
+
|
7478
|
+
.first\:rounded-l-full:first-child {
|
7479
|
+
border-top-left-radius: 9999px;
|
7480
|
+
border-bottom-left-radius: 9999px;
|
7481
|
+
}
|
7482
|
+
|
7427
7483
|
.first\:bg-blue-500:first-child {
|
7428
7484
|
--tw-bg-opacity: 1;
|
7429
7485
|
background-color: rgb(57 112 253 / var(--tw-bg-opacity));
|
7430
7486
|
}
|
7431
7487
|
|
7488
|
+
.first\:bg-purple-500:first-child {
|
7489
|
+
--tw-bg-opacity: 1;
|
7490
|
+
background-color: rgb(140 73 250 / var(--tw-bg-opacity));
|
7491
|
+
}
|
7492
|
+
|
7493
|
+
.first\:bg-neutral-200:first-child {
|
7494
|
+
--tw-bg-opacity: 1;
|
7495
|
+
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
|
7496
|
+
}
|
7497
|
+
|
7432
7498
|
.last\:mr-0:last-child {
|
7433
7499
|
margin-right: 0px;
|
7434
7500
|
}
|
7435
7501
|
|
7502
|
+
.last\:rounded-3xl:last-child {
|
7503
|
+
border-radius: 1.5rem;
|
7504
|
+
}
|
7505
|
+
|
7506
|
+
.last\:rounded-r-3xl:last-child {
|
7507
|
+
border-top-right-radius: 1.5rem;
|
7508
|
+
border-bottom-right-radius: 1.5rem;
|
7509
|
+
}
|
7510
|
+
|
7511
|
+
.last\:rounded-r-full:last-child {
|
7512
|
+
border-top-right-radius: 9999px;
|
7513
|
+
border-bottom-right-radius: 9999px;
|
7514
|
+
}
|
7515
|
+
|
7436
7516
|
.last\:border-b-0:last-child {
|
7437
7517
|
border-bottom-width: 0px;
|
7438
7518
|
}
|
@@ -8025,6 +8105,16 @@ select {
|
|
8025
8105
|
stroke: #FFFFFF;
|
8026
8106
|
}
|
8027
8107
|
|
8108
|
+
@media (max-width: 1140px) {
|
8109
|
+
.max-\[1140px\]\:shrink-0 {
|
8110
|
+
flex-shrink: 0;
|
8111
|
+
}
|
8112
|
+
|
8113
|
+
.max-\[1140px\]\:snap-center {
|
8114
|
+
scroll-snap-align: center;
|
8115
|
+
}
|
8116
|
+
}
|
8117
|
+
|
8028
8118
|
@media (min-width: 360px) {
|
8029
8119
|
.mb-s\:flex-row {
|
8030
8120
|
flex-direction: row;
|
@@ -8142,6 +8232,10 @@ select {
|
|
8142
8232
|
max-width: 530px;
|
8143
8233
|
}
|
8144
8234
|
|
8235
|
+
.tb\:snap-always {
|
8236
|
+
scroll-snap-stop: always;
|
8237
|
+
}
|
8238
|
+
|
8145
8239
|
.tb\:grid-cols-2 {
|
8146
8240
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
8147
8241
|
}
|
@@ -8190,6 +8284,14 @@ select {
|
|
8190
8284
|
gap: 0.75rem;
|
8191
8285
|
}
|
8192
8286
|
|
8287
|
+
.tb\:gap-1 {
|
8288
|
+
gap: 0.25rem;
|
8289
|
+
}
|
8290
|
+
|
8291
|
+
.tb\:gap-6 {
|
8292
|
+
gap: 1.5rem;
|
8293
|
+
}
|
8294
|
+
|
8193
8295
|
.tb\:gap-x-16 {
|
8194
8296
|
-webkit-column-gap: 4rem;
|
8195
8297
|
column-gap: 4rem;
|
@@ -8244,6 +8346,11 @@ select {
|
|
8244
8346
|
padding-right: 2rem;
|
8245
8347
|
}
|
8246
8348
|
|
8349
|
+
.tb\:px-0 {
|
8350
|
+
padding-left: 0px;
|
8351
|
+
padding-right: 0px;
|
8352
|
+
}
|
8353
|
+
|
8247
8354
|
.tb\:pb-14 {
|
8248
8355
|
padding-bottom: 3.5rem;
|
8249
8356
|
}
|
@@ -8268,6 +8375,14 @@ select {
|
|
8268
8375
|
padding-top: 2.875rem;
|
8269
8376
|
}
|
8270
8377
|
|
8378
|
+
.tb\:pl-0 {
|
8379
|
+
padding-left: 0px;
|
8380
|
+
}
|
8381
|
+
|
8382
|
+
.tb\:pt-14 {
|
8383
|
+
padding-top: 3.5rem;
|
8384
|
+
}
|
8385
|
+
|
8271
8386
|
.tb\:text-left {
|
8272
8387
|
text-align: left;
|
8273
8388
|
}
|
@@ -8723,6 +8838,10 @@ select {
|
|
8723
8838
|
gap: 9rem;
|
8724
8839
|
}
|
8725
8840
|
|
8841
|
+
.tb-l\:gap-6 {
|
8842
|
+
gap: 1.5rem;
|
8843
|
+
}
|
8844
|
+
|
8726
8845
|
.tb-l\:space-x-6 > :not([hidden]) ~ :not([hidden]) {
|
8727
8846
|
--tw-space-x-reverse: 0;
|
8728
8847
|
margin-right: calc(1.5rem * var(--tw-space-x-reverse));
|