hds-web 1.0.9 → 1.1.1
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 +19 -4
- package/dist/index.js +19 -4
- package/package.json +2 -1
- package/src/HDS/assets/icons/check-circle.svg +1 -1
- package/src/HDS/components/Tables/tableB.js +174 -41
- package/src/HDS/components/Tabs/tab.js +2 -2
- package/src/styles/tailwind.css +94 -19
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "hds-web",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.1",
|
|
4
4
|
"private": false,
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.es.js",
|
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
"prop-types": "^15.8.1",
|
|
16
16
|
"react": "^17.0.1",
|
|
17
17
|
"react-dom": "^17.0.1",
|
|
18
|
+
"react-markdown": "^8.0.7",
|
|
18
19
|
"react-scripts": "5.0.1",
|
|
19
20
|
"uuid": "^9.0.0",
|
|
20
21
|
"web-vitals": "^2.1.4",
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M7.5 12L10.5 15L16.5 9M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke-
|
|
2
|
+
<path d="M7.5 12L10.5 15L16.5 9M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
3
|
</svg>
|
|
@@ -1,44 +1,160 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { useState } from 'react';
|
|
2
3
|
import { Typography } from '../../foundation/Typography'
|
|
3
4
|
import { Icon } from '../common-components/Icon'
|
|
4
5
|
import { HDSColor } from '../../foundation/ColorPalette';
|
|
6
|
+
import { Tab } from '../Tabs'
|
|
7
|
+
import ReactMarkdown from "react-markdown";
|
|
8
|
+
|
|
9
|
+
const tabs = [
|
|
10
|
+
{ name: 'Level 1', href: '', current: false },
|
|
11
|
+
{ name: 'Level 2', href: '', current: false },
|
|
12
|
+
{ name: 'Level 3', href: '', current: true },
|
|
13
|
+
]
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
const levelCalc = (arr, index) => {
|
|
18
|
+
|
|
19
|
+
const keyIndex = 'key' + `${index}`;
|
|
20
|
+
console.log(keyIndex);
|
|
21
|
+
if (arr[keyIndex] && arr[keyIndex]['text'] && arr[keyIndex]['text'] !== null) {
|
|
22
|
+
return (
|
|
23
|
+
<>
|
|
24
|
+
|
|
25
|
+
{arr[keyIndex]['text']}
|
|
26
|
+
|
|
27
|
+
</>
|
|
28
|
+
)
|
|
29
|
+
}
|
|
30
|
+
if (arr[keyIndex] && arr[keyIndex]['text'] === null && arr[keyIndex]['iconVariant'] && arr[keyIndex]['iconVariant'] !== null && (arr[keyIndex]['iconStrokeClass']) !== null) {
|
|
31
|
+
|
|
32
|
+
return (
|
|
33
|
+
<>
|
|
34
|
+
<Icon height='h-5 w-5 stroke-[1.5px]' variant={arr[keyIndex]['iconVariant']} strokeClass={HDSColor(arr[keyIndex]['iconStrokeClass'])} />
|
|
35
|
+
</>
|
|
36
|
+
)
|
|
37
|
+
}
|
|
38
|
+
else return(
|
|
39
|
+
<></>
|
|
40
|
+
) ;
|
|
41
|
+
}
|
|
5
42
|
|
|
6
43
|
export default function TableB(props) {
|
|
7
44
|
const {
|
|
8
45
|
title,
|
|
9
|
-
|
|
46
|
+
title_color,
|
|
10
47
|
description,
|
|
11
|
-
|
|
48
|
+
desc_color,
|
|
12
49
|
TABLE_VALUE,
|
|
13
50
|
TABLE_HEADER,
|
|
14
|
-
children
|
|
15
|
-
|
|
16
51
|
} = props;
|
|
52
|
+
const [activeTab, setActiveTab] = useState(3);
|
|
53
|
+
|
|
54
|
+
function handleTabClick(tab) {
|
|
55
|
+
if(tab.name === 'Level 1') setActiveTab(1);
|
|
56
|
+
if(tab.name === 'Level 2') setActiveTab(2);
|
|
57
|
+
if(tab.name === 'Level 3') setActiveTab(3);
|
|
58
|
+
|
|
59
|
+
console.log(`Tab "${tab.name}" updatedTabs`);
|
|
60
|
+
// Perform any other actions based on the clicked tab
|
|
61
|
+
}
|
|
62
|
+
|
|
17
63
|
return (
|
|
18
64
|
<div className=" max-w-7xl px-4 sm:px-6 lg:px-8 ">
|
|
19
|
-
<div className="sm:flex sm:items-center ">
|
|
20
|
-
<div className="
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
65
|
+
<div className="sm:flex sm:items-center flex justify-around ">
|
|
66
|
+
<div className="w-full flex-col items-center flex justify-around tb-l:flex tb-l:flex-col tb-l:items-center">
|
|
67
|
+
<div>
|
|
68
|
+
{title && (
|
|
69
|
+
<Typography
|
|
70
|
+
textStyle='h3'
|
|
71
|
+
className={HDSColor(title_color)}
|
|
72
|
+
>
|
|
73
|
+
{title}
|
|
74
|
+
</Typography>
|
|
75
|
+
)}
|
|
76
|
+
{description && (
|
|
77
|
+
<Typography
|
|
78
|
+
textStyle='body1c'
|
|
79
|
+
className={HDSColor(desc_color)}
|
|
80
|
+
>
|
|
81
|
+
{description}
|
|
82
|
+
</Typography>
|
|
83
|
+
)}
|
|
84
|
+
</div>
|
|
85
|
+
<div className=' mt-11 rounded-full shadow tb-l:hidden'>
|
|
86
|
+
<Tab onTabClick={handleTabClick} tabs={tabs} />
|
|
87
|
+
</div>
|
|
40
88
|
</div>
|
|
89
|
+
|
|
41
90
|
</div>
|
|
91
|
+
|
|
92
|
+
{/* code for mobile */}
|
|
93
|
+
|
|
94
|
+
<div className='tb-l:hidden'>
|
|
95
|
+
<div className="mt-8 bg-neutral-0 rounded-3xl ">
|
|
96
|
+
<div className=" shadow rounded-3xl ">
|
|
97
|
+
|
|
98
|
+
<div className='flex border-x px-8 py-[1.625rem] border-neutral-200 rounded-t-3xl flex-col justify-center items-center text-center'>
|
|
99
|
+
<div className={'flex items-center gap-2'}>
|
|
100
|
+
{TABLE_HEADER[activeTab]['icon'] &&
|
|
101
|
+
(
|
|
102
|
+
<Icon
|
|
103
|
+
height='h-6 w-6'
|
|
104
|
+
variant={TABLE_HEADER[activeTab]['icon']}
|
|
105
|
+
strokeClass={TABLE_HEADER[activeTab]['iconStrokeClass']} />
|
|
106
|
+
)
|
|
107
|
+
}
|
|
108
|
+
{
|
|
109
|
+
TABLE_HEADER[activeTab]['title'] && activeTab == 0 && (
|
|
110
|
+
<Typography
|
|
111
|
+
textStyle='h5'
|
|
112
|
+
className={TABLE_HEADER[activeTab]['title_text_color']}>
|
|
113
|
+
{TABLE_HEADER[activeTab]['title']}
|
|
114
|
+
</Typography>)
|
|
115
|
+
}
|
|
116
|
+
{
|
|
117
|
+
TABLE_HEADER[activeTab]['title'] && activeTab != 0 && (
|
|
118
|
+
<Typography
|
|
119
|
+
textStyle='h5'
|
|
120
|
+
className={TABLE_HEADER[activeTab]['title_text_color']}>
|
|
121
|
+
{TABLE_HEADER[activeTab]['title']}
|
|
122
|
+
</Typography>)
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
|
|
126
|
+
</div>
|
|
127
|
+
<div className=' max-w-[10rem]'>
|
|
128
|
+
{TABLE_HEADER[activeTab]['descr'] && (
|
|
129
|
+
<Typography
|
|
130
|
+
textStyle='body1'
|
|
131
|
+
className={TABLE_HEADER[activeTab]['descr_text_color']}>
|
|
132
|
+
{TABLE_HEADER[activeTab]['descr']}
|
|
133
|
+
</Typography>)}
|
|
134
|
+
</div>
|
|
135
|
+
</div>
|
|
136
|
+
|
|
137
|
+
|
|
138
|
+
<div className="divide-y divide-neutral-200 rounded-b-3xl">
|
|
139
|
+
<div className='flex flex-col border border-neutral-200 divide-y divide-neutral-200 rounded-b-3xl items-center'>
|
|
140
|
+
{TABLE_VALUE.map((key, index) => (
|
|
141
|
+
<React.Fragment key={index}>
|
|
142
|
+
<div className='flex w-full p-4 gap-4 items-center'>
|
|
143
|
+
<Typography as='div' textStyle='bodyc' className='text-neutral-700 flex items-start gap-4'>
|
|
144
|
+
{levelCalc(key, activeTab)} {key['rowTitle']}
|
|
145
|
+
</Typography>
|
|
146
|
+
</div>
|
|
147
|
+
</React.Fragment>
|
|
148
|
+
))}
|
|
149
|
+
</div>
|
|
150
|
+
|
|
151
|
+
</div>
|
|
152
|
+
</div>
|
|
153
|
+
</div>
|
|
154
|
+
</div>
|
|
155
|
+
|
|
156
|
+
{/* code for mobile */}
|
|
157
|
+
|
|
42
158
|
<div className='hidden tb-l:block' >
|
|
43
159
|
<div className="-mx-4 mt-8 sm:-mx-0 bg-neutral-0 rounded-3xl ">
|
|
44
160
|
<table className="min-w-full shadow rounded-3xl ">
|
|
@@ -56,7 +172,7 @@ export default function TableB(props) {
|
|
|
56
172
|
{TABLE_HEADER[key]['icon'] &&
|
|
57
173
|
(
|
|
58
174
|
<Icon
|
|
59
|
-
height='h-6 w-6'
|
|
175
|
+
height='h-6 w-6 stroke-[1.5px]'
|
|
60
176
|
variant={TABLE_HEADER[key]['icon']}
|
|
61
177
|
strokeClass={HDSColor(TABLE_HEADER[key]['iconStrokeClass'])} />
|
|
62
178
|
)
|
|
@@ -74,11 +190,9 @@ export default function TableB(props) {
|
|
|
74
190
|
<Typography
|
|
75
191
|
textStyle='h5'
|
|
76
192
|
className={HDSColor(TABLE_HEADER[key]['title_text_color'])}>
|
|
77
|
-
{TABLE_HEADER[key]['title']}
|
|
193
|
+
<ReactMarkdown>{TABLE_HEADER[key]['title']}</ReactMarkdown>
|
|
78
194
|
</Typography>)
|
|
79
195
|
}
|
|
80
|
-
|
|
81
|
-
|
|
82
196
|
</div>
|
|
83
197
|
<div className=' max-w-[10rem]'>
|
|
84
198
|
{TABLE_HEADER[key]['descr'] && (
|
|
@@ -97,31 +211,45 @@ export default function TableB(props) {
|
|
|
97
211
|
<tbody className="divide-y divide-neutral-200 rounded-b-3xl">
|
|
98
212
|
{TABLE_VALUE.map((value, index) => (
|
|
99
213
|
<tr className='divide-x divide-neutral-200' key={index}>
|
|
100
|
-
{Object.keys(value).map((
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
214
|
+
{Object.keys(value).map((keyIndex) => (
|
|
215
|
+
|
|
216
|
+
<React.Fragment key={index}>
|
|
217
|
+
{keyIndex !== null && keyIndex === 'rowTitle' && (<td
|
|
218
|
+
key={index}
|
|
219
|
+
className="px-8 py-7 w-[22.5rem]"
|
|
105
220
|
>
|
|
106
|
-
<Typography className='max-w-[22rem] text-neutral-700' textStyle='body1c'>{value[
|
|
221
|
+
<Typography className='max-w-[22rem] text-neutral-700' textStyle='body1c'><ReactMarkdown>{value[keyIndex]}</ReactMarkdown></Typography>
|
|
107
222
|
|
|
108
223
|
</td>)}
|
|
109
224
|
|
|
110
|
-
{
|
|
225
|
+
{keyIndex !== null && keyIndex !== 'rowTitle' && value[keyIndex] !== null && (
|
|
111
226
|
<td
|
|
112
|
-
key={
|
|
227
|
+
key={keyIndex}
|
|
113
228
|
className="px-8 py-7 text-center"
|
|
114
229
|
>
|
|
115
|
-
{value[
|
|
116
|
-
<
|
|
230
|
+
{value && keyIndex && value[keyIndex] && value[keyIndex]['text'] === null && !value[keyIndex]['iconVariant'] && value[keyIndex]['iconVariant'] === null && (
|
|
231
|
+
<div></div>
|
|
232
|
+
|
|
233
|
+
)}
|
|
234
|
+
{value[keyIndex]['text'] !== null && value[keyIndex]['text'] && (
|
|
235
|
+
<Typography className='text-neutral-700' textStyle='body1c'>{value[keyIndex]['text']}</Typography>
|
|
117
236
|
|
|
118
237
|
)}
|
|
119
|
-
{!value[
|
|
238
|
+
{(value[keyIndex]['text'] === null || !value[keyIndex]['text']) && value[keyIndex]['iconVariant'] && (
|
|
120
239
|
<div className='flex justify-center'>
|
|
121
|
-
<Icon height='h-5 w-5' variant={value[
|
|
240
|
+
<Icon height='h-5 w-5 stroke-[1.5px]' variant={value[keyIndex]['iconVariant']} strokeClass={HDSColor(value[keyIndex]['iconStrokeClass'])} />
|
|
122
241
|
</div>
|
|
123
242
|
)}
|
|
124
243
|
</td>)}
|
|
244
|
+
{keyIndex === null && (
|
|
245
|
+
<td
|
|
246
|
+
key={index}
|
|
247
|
+
className="px-8 py-7 text-center"
|
|
248
|
+
>
|
|
249
|
+
</td>
|
|
250
|
+
)}
|
|
251
|
+
|
|
252
|
+
|
|
125
253
|
</React.Fragment>
|
|
126
254
|
))}
|
|
127
255
|
</tr>
|
|
@@ -133,3 +261,8 @@ export default function TableB(props) {
|
|
|
133
261
|
</div>
|
|
134
262
|
)
|
|
135
263
|
}
|
|
264
|
+
|
|
265
|
+
TableB.defaultProps = {
|
|
266
|
+
title_color: 'text-blue-800',
|
|
267
|
+
desc_color: 'text-blue-600'
|
|
268
|
+
}
|
|
@@ -36,7 +36,7 @@ export default function Tab(props) {
|
|
|
36
36
|
href="#"
|
|
37
37
|
className={`px-3 py-1 font-medium text-sm rounded-full ${
|
|
38
38
|
activeTab === tab
|
|
39
|
-
? 'bg-blue-
|
|
39
|
+
? 'bg-blue-500 text-neutral-0'
|
|
40
40
|
: 'text-neutral-500 bg-neutral-0 hover:bg-neutral-100 flex-nowrap transition-all duration-500'
|
|
41
41
|
}`}
|
|
42
42
|
aria-current={activeTab === tab ? 'page' : undefined}
|
|
@@ -47,7 +47,7 @@ export default function Tab(props) {
|
|
|
47
47
|
))}
|
|
48
48
|
<span
|
|
49
49
|
ref={pillRef}
|
|
50
|
-
className="absolute left-0 -z-10 bg-blue-
|
|
50
|
+
className="absolute left-0 -z-10 bg-blue-500 rounded-full transition-all ease-in-out duration-500"
|
|
51
51
|
style={{
|
|
52
52
|
left: `${activeTab.index * 100}%`,
|
|
53
53
|
width: `${activeTab.width}px`, // Use the width of the clicked tab
|
package/src/styles/tailwind.css
CHANGED
|
@@ -1237,6 +1237,10 @@ select {
|
|
|
1237
1237
|
margin-top: 2.25rem;
|
|
1238
1238
|
}
|
|
1239
1239
|
|
|
1240
|
+
.mt-11 {
|
|
1241
|
+
margin-top: 2.75rem;
|
|
1242
|
+
}
|
|
1243
|
+
|
|
1240
1244
|
.block {
|
|
1241
1245
|
display: block;
|
|
1242
1246
|
}
|
|
@@ -1676,6 +1680,42 @@ select {
|
|
|
1676
1680
|
animation: bounce 1s infinite;
|
|
1677
1681
|
}
|
|
1678
1682
|
|
|
1683
|
+
@-webkit-keyframes pulse {
|
|
1684
|
+
50% {
|
|
1685
|
+
opacity: .5;
|
|
1686
|
+
}
|
|
1687
|
+
}
|
|
1688
|
+
|
|
1689
|
+
@keyframes pulse {
|
|
1690
|
+
50% {
|
|
1691
|
+
opacity: .5;
|
|
1692
|
+
}
|
|
1693
|
+
}
|
|
1694
|
+
|
|
1695
|
+
.animate-pulse {
|
|
1696
|
+
-webkit-animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
1697
|
+
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
1698
|
+
}
|
|
1699
|
+
|
|
1700
|
+
@-webkit-keyframes spin {
|
|
1701
|
+
to {
|
|
1702
|
+
-webkit-transform: rotate(360deg);
|
|
1703
|
+
transform: rotate(360deg);
|
|
1704
|
+
}
|
|
1705
|
+
}
|
|
1706
|
+
|
|
1707
|
+
@keyframes spin {
|
|
1708
|
+
to {
|
|
1709
|
+
-webkit-transform: rotate(360deg);
|
|
1710
|
+
transform: rotate(360deg);
|
|
1711
|
+
}
|
|
1712
|
+
}
|
|
1713
|
+
|
|
1714
|
+
.animate-spin {
|
|
1715
|
+
-webkit-animation: spin 1s linear infinite;
|
|
1716
|
+
animation: spin 1s linear infinite;
|
|
1717
|
+
}
|
|
1718
|
+
|
|
1679
1719
|
.cursor-pointer {
|
|
1680
1720
|
cursor: pointer;
|
|
1681
1721
|
}
|
|
@@ -1942,6 +1982,18 @@ select {
|
|
|
1942
1982
|
border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
|
|
1943
1983
|
}
|
|
1944
1984
|
|
|
1985
|
+
.divide-x-2 > :not([hidden]) ~ :not([hidden]) {
|
|
1986
|
+
--tw-divide-x-reverse: 0;
|
|
1987
|
+
border-right-width: calc(2px * var(--tw-divide-x-reverse));
|
|
1988
|
+
border-left-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)));
|
|
1989
|
+
}
|
|
1990
|
+
|
|
1991
|
+
.divide-y-2 > :not([hidden]) ~ :not([hidden]) {
|
|
1992
|
+
--tw-divide-y-reverse: 0;
|
|
1993
|
+
border-top-width: calc(2px * calc(1 - var(--tw-divide-y-reverse)));
|
|
1994
|
+
border-bottom-width: calc(2px * var(--tw-divide-y-reverse));
|
|
1995
|
+
}
|
|
1996
|
+
|
|
1945
1997
|
.divide-blue-600\/10 > :not([hidden]) ~ :not([hidden]) {
|
|
1946
1998
|
border-color: rgb(30 86 227 / 0.1);
|
|
1947
1999
|
}
|
|
@@ -2092,6 +2144,11 @@ select {
|
|
|
2092
2144
|
border-width: 1.5px;
|
|
2093
2145
|
}
|
|
2094
2146
|
|
|
2147
|
+
.border-x {
|
|
2148
|
+
border-left-width: 1px;
|
|
2149
|
+
border-right-width: 1px;
|
|
2150
|
+
}
|
|
2151
|
+
|
|
2095
2152
|
.border-b {
|
|
2096
2153
|
border-bottom-width: 1px;
|
|
2097
2154
|
}
|
|
@@ -5224,6 +5281,21 @@ select {
|
|
|
5224
5281
|
padding-bottom: 1.75rem;
|
|
5225
5282
|
}
|
|
5226
5283
|
|
|
5284
|
+
.py-\[26px\] {
|
|
5285
|
+
padding-top: 26px;
|
|
5286
|
+
padding-bottom: 26px;
|
|
5287
|
+
}
|
|
5288
|
+
|
|
5289
|
+
.py-\[1\.625\] {
|
|
5290
|
+
padding-top: 1.625;
|
|
5291
|
+
padding-bottom: 1.625;
|
|
5292
|
+
}
|
|
5293
|
+
|
|
5294
|
+
.py-\[1\.625rem\] {
|
|
5295
|
+
padding-top: 1.625rem;
|
|
5296
|
+
padding-bottom: 1.625rem;
|
|
5297
|
+
}
|
|
5298
|
+
|
|
5227
5299
|
.pb-10 {
|
|
5228
5300
|
padding-bottom: 2.5rem;
|
|
5229
5301
|
}
|
|
@@ -5356,6 +5428,10 @@ select {
|
|
|
5356
5428
|
padding-top: 1.5rem;
|
|
5357
5429
|
}
|
|
5358
5430
|
|
|
5431
|
+
.pt-11 {
|
|
5432
|
+
padding-top: 2.75rem;
|
|
5433
|
+
}
|
|
5434
|
+
|
|
5359
5435
|
.text-left {
|
|
5360
5436
|
text-align: left;
|
|
5361
5437
|
}
|
|
@@ -6357,12 +6433,16 @@ select {
|
|
|
6357
6433
|
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
|
|
6358
6434
|
}
|
|
6359
6435
|
|
|
6436
|
+
.ease-in-out {
|
|
6437
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
6438
|
+
}
|
|
6439
|
+
|
|
6360
6440
|
.ease-out {
|
|
6361
6441
|
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
6362
6442
|
}
|
|
6363
6443
|
|
|
6364
|
-
.ease-
|
|
6365
|
-
transition-timing-function:
|
|
6444
|
+
.ease-linear {
|
|
6445
|
+
transition-timing-function: linear;
|
|
6366
6446
|
}
|
|
6367
6447
|
|
|
6368
6448
|
/* Typography classes */
|
|
@@ -7391,12 +7471,6 @@ select {
|
|
|
7391
7471
|
animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
|
|
7392
7472
|
}
|
|
7393
7473
|
|
|
7394
|
-
@-webkit-keyframes pulse {
|
|
7395
|
-
50% {
|
|
7396
|
-
opacity: .5;
|
|
7397
|
-
}
|
|
7398
|
-
}
|
|
7399
|
-
|
|
7400
7474
|
@keyframes pulse {
|
|
7401
7475
|
50% {
|
|
7402
7476
|
opacity: .5;
|
|
@@ -7408,13 +7482,6 @@ select {
|
|
|
7408
7482
|
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
7409
7483
|
}
|
|
7410
7484
|
|
|
7411
|
-
@-webkit-keyframes spin {
|
|
7412
|
-
to {
|
|
7413
|
-
-webkit-transform: rotate(360deg);
|
|
7414
|
-
transform: rotate(360deg);
|
|
7415
|
-
}
|
|
7416
|
-
}
|
|
7417
|
-
|
|
7418
7485
|
@keyframes spin {
|
|
7419
7486
|
to {
|
|
7420
7487
|
-webkit-transform: rotate(360deg);
|
|
@@ -8483,10 +8550,6 @@ select {
|
|
|
8483
8550
|
flex: 1 1 0%;
|
|
8484
8551
|
}
|
|
8485
8552
|
|
|
8486
|
-
.md\:flex-col {
|
|
8487
|
-
flex-direction: column;
|
|
8488
|
-
}
|
|
8489
|
-
|
|
8490
8553
|
.md\:items-center {
|
|
8491
8554
|
align-items: center;
|
|
8492
8555
|
}
|
|
@@ -8527,6 +8590,10 @@ select {
|
|
|
8527
8590
|
display: flex;
|
|
8528
8591
|
}
|
|
8529
8592
|
|
|
8593
|
+
.tb-l\:hidden {
|
|
8594
|
+
display: none;
|
|
8595
|
+
}
|
|
8596
|
+
|
|
8530
8597
|
.tb-l\:w-1\/2 {
|
|
8531
8598
|
width: 50%;
|
|
8532
8599
|
}
|
|
@@ -8539,6 +8606,14 @@ select {
|
|
|
8539
8606
|
min-width: 400px;
|
|
8540
8607
|
}
|
|
8541
8608
|
|
|
8609
|
+
.tb-l\:flex-col {
|
|
8610
|
+
flex-direction: column;
|
|
8611
|
+
}
|
|
8612
|
+
|
|
8613
|
+
.tb-l\:items-center {
|
|
8614
|
+
align-items: center;
|
|
8615
|
+
}
|
|
8616
|
+
|
|
8542
8617
|
.tb-l\:justify-start {
|
|
8543
8618
|
justify-content: flex-start;
|
|
8544
8619
|
}
|