@sk-web-gui/core 0.1.33 → 0.1.35
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/README.md +1 -1
- package/package.json +2 -2
- package/src/colors.js +116 -116
- package/src/components/accordion.js +46 -43
- package/src/components/alert.js +17 -17
- package/src/components/avatar.js +43 -43
- package/src/components/badge.js +25 -26
- package/src/components/breadcrumb.js +6 -6
- package/src/components/button-group.js +24 -24
- package/src/components/button.js +81 -85
- package/src/components/calendar.js +68 -67
- package/src/components/card.js +49 -50
- package/src/components/checkbox.js +49 -50
- package/src/components/code.js +5 -5
- package/src/components/cookie-consent.js +21 -21
- package/src/components/divider.js +6 -6
- package/src/components/dot.js +28 -28
- package/src/components/footer.js +7 -4
- package/src/components/forms.js +139 -146
- package/src/components/header.js +33 -35
- package/src/components/icon-button.js +2 -2
- package/src/components/icon.js +4 -4
- package/src/components/kbd.js +5 -5
- package/src/components/link.js +12 -12
- package/src/components/message.js +35 -35
- package/src/components/modal.js +21 -20
- package/src/components/notification.js +31 -31
- package/src/components/pagination.js +33 -34
- package/src/components/radio.js +55 -54
- package/src/components/switch.js +61 -64
- package/src/components/table.js +9 -9
- package/src/components/tag.js +40 -38
- package/src/components/user-menu.js +23 -23
- package/src/components/zebratable.js +59 -60
- package/src/index.js +109 -119
package/src/components/modal.js
CHANGED
|
@@ -1,29 +1,30 @@
|
|
|
1
1
|
module.exports = Modal = () => ({
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
'.modal': {
|
|
3
|
+
'@apply fixed inset-0 z-10 flex items-center justify-center overflow-y-auto': {},
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
'&-backdrop': {
|
|
6
|
+
'@apply bg-black bg-opacity-30': {},
|
|
7
|
+
},
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
'&-wrapper': {
|
|
10
|
+
'@apply flex flex-col container py-8 px-4 text-center bg-white max-w-screen-sm relative': {},
|
|
11
|
+
},
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
},
|
|
13
|
+
'&-close-btn': {
|
|
14
|
+
'@apply cursor-pointer hover:text-primary-active absolute right-8 top-6 border border-transparent focus-visible:border-black flex self-center':
|
|
15
|
+
{},
|
|
16
|
+
},
|
|
16
17
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
18
|
+
'&-title': {
|
|
19
|
+
'@apply text-3xl p-4': {},
|
|
20
|
+
},
|
|
20
21
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
22
|
+
'&-description': {
|
|
23
|
+
'@apply text-base p-4': {},
|
|
24
|
+
},
|
|
24
25
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
},
|
|
26
|
+
'&-content-wrapper': {
|
|
27
|
+
'@apply p-4 space-y-10': {},
|
|
28
28
|
},
|
|
29
|
+
},
|
|
29
30
|
});
|
|
@@ -1,56 +1,56 @@
|
|
|
1
1
|
module.exports = Notification = () => ({
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
'.notification': {
|
|
3
|
+
'@apply relative flex p-4 text-sm w-96 m-2 max-w-full rounded-base shadow-sm sm:max-w-md': {},
|
|
4
|
+
'@apply text-body bg-white border border-neutral-200': {},
|
|
5
5
|
// dark
|
|
6
|
-
|
|
6
|
+
'@apply dark:text-neutral-100 dark:bg-neutral-700 dark:border-neutral-600': {},
|
|
7
7
|
},
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
'.notification-icon': {
|
|
10
|
+
'@apply flex-shrink-0 w-5 h-5 mr-3': {},
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
color:
|
|
12
|
+
'&-info': {
|
|
13
|
+
'--tw-text-opacity': '1',
|
|
14
|
+
color: 'rgba(59, 130, 246, var(--tw-text-opacity))',
|
|
15
15
|
},
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
color:
|
|
16
|
+
'&-success': {
|
|
17
|
+
'--tw-text-opacity': '1',
|
|
18
|
+
color: 'rgba(34, 197, 94, var(--tw-text-opacity))',
|
|
19
19
|
},
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
color:
|
|
20
|
+
'&-error': {
|
|
21
|
+
'--tw-text-opacity': '1',
|
|
22
|
+
color: 'rgba(239, 68, 68, var(--tw-text-opacity))',
|
|
23
23
|
},
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
color:
|
|
24
|
+
'&-warning': {
|
|
25
|
+
'--tw-text-opacity': '1',
|
|
26
|
+
color: 'rgba(234, 179, 8, var(--tw-text-opacity))',
|
|
27
27
|
},
|
|
28
28
|
},
|
|
29
29
|
|
|
30
|
-
|
|
31
|
-
|
|
30
|
+
'.notification-content': {
|
|
31
|
+
'@apply flex flex-col items-start flex-1 mr-2 -mt-px text-left': {},
|
|
32
32
|
|
|
33
|
-
|
|
34
|
-
|
|
33
|
+
'&-title': {
|
|
34
|
+
'@apply font-semibold': {},
|
|
35
35
|
},
|
|
36
36
|
|
|
37
|
-
|
|
38
|
-
|
|
37
|
+
'&-description': {
|
|
38
|
+
'@apply text-neutral-500 dark:text-neutral-400': {},
|
|
39
39
|
},
|
|
40
40
|
},
|
|
41
41
|
|
|
42
|
-
|
|
43
|
-
|
|
42
|
+
'.notification-action': {
|
|
43
|
+
'@apply absolute space-x-2': {},
|
|
44
44
|
right: 16,
|
|
45
45
|
top: 16,
|
|
46
46
|
|
|
47
|
-
|
|
48
|
-
|
|
47
|
+
'&-undo': {
|
|
48
|
+
'@apply h-auto p-0 text-sm': {},
|
|
49
49
|
},
|
|
50
50
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
51
|
+
'&-close-button': {
|
|
52
|
+
'@apply cursor-base text-neutral-700 hover:text-body': {},
|
|
53
|
+
'@apply dark:text-neutral-400 dark:hover:text-neutral-100': {},
|
|
54
54
|
},
|
|
55
55
|
},
|
|
56
56
|
});
|
|
@@ -1,70 +1,69 @@
|
|
|
1
1
|
module.exports = Pagination = () => ({
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
'.pagination': {
|
|
3
|
+
'@apply select-none': {},
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
'&-sm': {
|
|
6
|
+
'@apply text-xs': {},
|
|
7
7
|
},
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
'&-md': {
|
|
10
|
+
'@apply text-lg': {},
|
|
11
11
|
},
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
'&-lg': {
|
|
14
|
+
'@apply text-xl': {},
|
|
15
15
|
},
|
|
16
16
|
|
|
17
|
-
|
|
18
|
-
|
|
17
|
+
'&-list': {
|
|
18
|
+
'@apply flex items-baseline': {},
|
|
19
19
|
},
|
|
20
20
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
width:
|
|
24
|
-
height:
|
|
21
|
+
'&-pageLabel': {
|
|
22
|
+
'@apply cursor-pointer m-sm': {},
|
|
23
|
+
width: '1.5em',
|
|
24
|
+
height: '1.75em',
|
|
25
25
|
|
|
26
26
|
"&[aria-disabled='true']": {
|
|
27
|
-
|
|
27
|
+
'@apply border-primary border-b cursor-default text-primary': {},
|
|
28
28
|
},
|
|
29
29
|
},
|
|
30
30
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
{},
|
|
31
|
+
'&-prevNextButton': {
|
|
32
|
+
'@apply text-body ml-4 inline-flex items-center sm:w-auto inline-flex flex-row leading-none': {},
|
|
34
33
|
|
|
35
|
-
|
|
36
|
-
|
|
34
|
+
'&[data-reverse=true]': {
|
|
35
|
+
'@apply mr-4 ml-0 flex-row-reverse': {},
|
|
37
36
|
|
|
38
|
-
|
|
39
|
-
|
|
37
|
+
'.pagination-prevNextButton-label': {
|
|
38
|
+
'@apply mr-sm ml-0': {},
|
|
40
39
|
},
|
|
41
40
|
},
|
|
42
41
|
|
|
43
|
-
|
|
44
|
-
|
|
42
|
+
'&[disabled]': {
|
|
43
|
+
'@apply opacity-50 cursor-default': {},
|
|
45
44
|
},
|
|
46
45
|
|
|
47
46
|
"&[disabled='false']": {
|
|
48
|
-
|
|
49
|
-
|
|
47
|
+
'&-label, &-icon': {
|
|
48
|
+
'@apply cursor-pointer': {},
|
|
50
49
|
},
|
|
51
50
|
},
|
|
52
51
|
|
|
53
|
-
|
|
54
|
-
|
|
52
|
+
'&-label': {
|
|
53
|
+
'@apply hidden sm:inline ml-sm leading-none': {},
|
|
55
54
|
},
|
|
56
55
|
|
|
57
|
-
|
|
58
|
-
|
|
56
|
+
'&-icon': {
|
|
57
|
+
'@apply m-1 align-text-bottom leading-none flex items-center': {},
|
|
59
58
|
|
|
60
|
-
|
|
61
|
-
fontSize:
|
|
59
|
+
'.MuiSvgIcon-root': {
|
|
60
|
+
fontSize: '1em',
|
|
62
61
|
},
|
|
63
62
|
},
|
|
64
63
|
},
|
|
65
64
|
|
|
66
|
-
|
|
67
|
-
|
|
65
|
+
'&-ellipsis': {
|
|
66
|
+
'@apply inline-block w-16 text-center': {},
|
|
68
67
|
},
|
|
69
68
|
},
|
|
70
69
|
});
|
package/src/components/radio.js
CHANGED
|
@@ -1,40 +1,40 @@
|
|
|
1
1
|
module.exports = Radio = (colors) => ({
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
backgroundColor:
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
2
|
+
'.form-radio': {
|
|
3
|
+
'@apply shadow-sm': {},
|
|
4
|
+
backgroundColor: 'inherit',
|
|
5
|
+
'@apply border-neutral-300': {},
|
|
6
|
+
'&[aria-invalid=true]': {
|
|
7
|
+
'--tw-border-opacity': '1',
|
|
8
|
+
borderColor: 'rgba(220, 38, 38, var(--tw-border-opacity))',
|
|
9
9
|
},
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
'&[aria-invalid=true]:hover': {
|
|
11
|
+
'--tw-border-opacity': '1',
|
|
12
|
+
'border-color': 'rgba(220, 38, 38, var(--tw-border-opacity))',
|
|
13
13
|
},
|
|
14
14
|
// dark colors
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
15
|
+
'@apply dark:border-neutral-400': {},
|
|
16
|
+
'.dark &[aria-invalid=true]': {
|
|
17
|
+
'--tw-border-opacity': '1',
|
|
18
|
+
borderColor: 'rgba(248, 113, 113, var(--tw-border-opacity))',
|
|
19
19
|
},
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
20
|
+
'.dark &[aria-invalid=true]:hover': {
|
|
21
|
+
'--tw-border-opacity': '1',
|
|
22
|
+
borderColor: 'rgba(248, 113, 113, var(--tw-border-opacity))',
|
|
23
23
|
},
|
|
24
24
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
25
|
+
'@media (prefers-color-scheme: dark)': {
|
|
26
|
+
'&[aria-invalid=true]': {
|
|
27
|
+
'--tw-border-opacity': '1',
|
|
28
|
+
borderColor: 'rgba(220, 38, 38, var(--tw-border-opacity))',
|
|
29
29
|
},
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
30
|
+
'&[aria-invalid=true]:hover': {
|
|
31
|
+
'--tw-border-opacity': '1',
|
|
32
|
+
'border-color': 'rgba(220, 38, 38, var(--tw-border-opacity))',
|
|
33
33
|
},
|
|
34
34
|
},
|
|
35
35
|
|
|
36
|
-
|
|
37
|
-
borderColor:
|
|
36
|
+
'&:checked': {
|
|
37
|
+
borderColor: 'transparent',
|
|
38
38
|
},
|
|
39
39
|
|
|
40
40
|
// colors
|
|
@@ -51,52 +51,53 @@ module.exports = Radio = (colors) => ({
|
|
|
51
51
|
{}
|
|
52
52
|
),
|
|
53
53
|
|
|
54
|
-
|
|
54
|
+
'@apply dark:focus-visible:ring-offset-neutral-900': {},
|
|
55
55
|
|
|
56
56
|
// sizing
|
|
57
|
-
|
|
58
|
-
|
|
57
|
+
'&-sm': {
|
|
58
|
+
'@apply w-3 h-3': {},
|
|
59
59
|
},
|
|
60
60
|
|
|
61
|
-
|
|
62
|
-
|
|
61
|
+
'&-md': {
|
|
62
|
+
'@apply w-4 h-4': {},
|
|
63
63
|
},
|
|
64
64
|
|
|
65
|
-
|
|
66
|
-
|
|
65
|
+
'&-lg': {
|
|
66
|
+
'@apply w-5 h-5': {},
|
|
67
67
|
},
|
|
68
68
|
|
|
69
|
-
|
|
70
|
-
|
|
69
|
+
'&-xl': {
|
|
70
|
+
'@apply w-6 h-6': {},
|
|
71
71
|
},
|
|
72
72
|
|
|
73
73
|
// disabled
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
74
|
+
'&-disabled': {
|
|
75
|
+
'@apply disabled:shadow-none disabled:border-neutral-300 disabled:bg-neutral-300 disabled:hover:text-neutral-300':
|
|
76
|
+
{},
|
|
77
|
+
'@apply dark:disabled:border-transparent dark:disabled:bg-white/20 dark:disabled:hover:text-white/20': {},
|
|
77
78
|
},
|
|
78
79
|
|
|
79
80
|
// label
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
81
|
+
'&-label': {
|
|
82
|
+
'@apply ml-2 select-none text-sm': {},
|
|
83
|
+
'@apply text-body': {},
|
|
83
84
|
// dark colors
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
85
|
+
'@apply dark:text-neutral-100': {},
|
|
86
|
+
|
|
87
|
+
'&-sm': {
|
|
88
|
+
'@apply text-xs': {},
|
|
88
89
|
},
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
90
|
+
|
|
91
|
+
'&-md': {
|
|
92
|
+
'@apply text-sm': {},
|
|
92
93
|
},
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
94
|
+
|
|
95
|
+
'&-lg': {
|
|
96
|
+
'@apply text-base': {},
|
|
96
97
|
},
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
98
|
+
|
|
99
|
+
'&-xl': {
|
|
100
|
+
'@apply text-lg': {},
|
|
100
101
|
},
|
|
101
102
|
},
|
|
102
103
|
},
|
package/src/components/switch.js
CHANGED
|
@@ -1,55 +1,53 @@
|
|
|
1
1
|
module.exports = Switch = (colors) => ({
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
'.form-switch-label': {
|
|
3
|
+
'@apply inline-block align-middle': {},
|
|
4
4
|
|
|
5
5
|
"&[type='hidden']": {
|
|
6
|
-
|
|
6
|
+
'@apply hidden': {},
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
'.form-switch': {
|
|
9
|
+
'@apply hidden': {},
|
|
10
10
|
},
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
|
|
11
|
+
},
|
|
14
12
|
},
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
13
|
+
'.form-switch': {
|
|
14
|
+
'@apply rounded-full p-0.5 cursor-base focus:outline-none': {},
|
|
15
|
+
'@apply bg-gray-stroke dark:bg-neutral-700': {},
|
|
18
16
|
// Hover
|
|
19
17
|
//"@apply hover:bg-neutral-300 dark:hover:bg-neutral-600": {},
|
|
20
18
|
|
|
21
|
-
border:
|
|
19
|
+
border: '0.1rem solid transparent',
|
|
22
20
|
|
|
23
|
-
|
|
24
|
-
backgroundColor:
|
|
25
|
-
|
|
26
|
-
transform:
|
|
21
|
+
'input[type=checkbox]:checked + &, input[type=checkbox][aria-checked=mixed] + &': {
|
|
22
|
+
backgroundColor: 'currentColor',
|
|
23
|
+
'.form-switch-box-sm': {
|
|
24
|
+
transform: 'translateX(1.42rem)',
|
|
27
25
|
},
|
|
28
|
-
|
|
29
|
-
transform:
|
|
26
|
+
'.form-switch-box-md': {
|
|
27
|
+
transform: 'translateX(1.6rem)',
|
|
30
28
|
},
|
|
31
|
-
|
|
32
|
-
transform:
|
|
29
|
+
'.form-switch-box-lg': {
|
|
30
|
+
transform: 'translateX(1.78rem)',
|
|
33
31
|
},
|
|
34
32
|
},
|
|
35
33
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
"@apply border-primary !important": {},
|
|
41
|
-
"@apply ring-4 ring-black !important": {},
|
|
34
|
+
'input[type=checkbox]:focus-visible + &': {
|
|
35
|
+
'@apply z-base !important': {},
|
|
36
|
+
'@apply border-primary !important': {},
|
|
37
|
+
'@apply ring-4 ring-black !important': {},
|
|
42
38
|
},
|
|
43
39
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
},
|
|
47
|
-
".dark input[type=checkbox]:checked:focus-visible + &,.dark input[type=checkbox][aria-checked=mixed]:focus-visible + &": {
|
|
48
|
-
"@apply ring-black !important": {},
|
|
49
|
-
},
|
|
50
|
-
"input[type=checkbox]:checked:hover:not(:disabled) + &, input[type=checkbox][aria-checked=mixed]:hover:not(:disabled) + &": {
|
|
51
|
-
"@apply cursor-base": {},
|
|
40
|
+
'input[type=checkbox]:checked:focus-visible + &, input[type=checkbox][aria-checked=mixed]:focus-visible + &': {
|
|
41
|
+
'@apply ring-black !important': {},
|
|
52
42
|
},
|
|
43
|
+
'.dark input[type=checkbox]:checked:focus-visible + &,.dark input[type=checkbox][aria-checked=mixed]:focus-visible + &':
|
|
44
|
+
{
|
|
45
|
+
'@apply ring-black !important': {},
|
|
46
|
+
},
|
|
47
|
+
'input[type=checkbox]:checked:hover:not(:disabled) + &, input[type=checkbox][aria-checked=mixed]:hover:not(:disabled) + &':
|
|
48
|
+
{
|
|
49
|
+
'@apply cursor-base': {},
|
|
50
|
+
},
|
|
53
51
|
|
|
54
52
|
// colors
|
|
55
53
|
...colors.reduce(
|
|
@@ -58,10 +56,10 @@ module.exports = Switch = (colors) => ({
|
|
|
58
56
|
[`&[data-color="${color}"]`]: {
|
|
59
57
|
[`@apply text-${color}`]: {},
|
|
60
58
|
|
|
61
|
-
|
|
59
|
+
'input[type=checkbox]:focus + &': {
|
|
62
60
|
borderColor: `theme('colors.${color}.DEFAULT')`,
|
|
63
61
|
boxShadow: `0 0 5px theme('colors.${color}.DEFAULT')`,
|
|
64
|
-
borderWidth:
|
|
62
|
+
borderWidth: '0.1rem',
|
|
65
63
|
},
|
|
66
64
|
},
|
|
67
65
|
}),
|
|
@@ -69,54 +67,53 @@ module.exports = Switch = (colors) => ({
|
|
|
69
67
|
),
|
|
70
68
|
|
|
71
69
|
// disabled
|
|
72
|
-
|
|
73
|
-
|
|
70
|
+
'&-disabled': {
|
|
71
|
+
'@apply cursor-not-allowed': {},
|
|
74
72
|
|
|
75
|
-
|
|
76
|
-
backgroundColor:
|
|
77
|
-
}
|
|
73
|
+
'&': {
|
|
74
|
+
backgroundColor: '#ECECEC',
|
|
75
|
+
},
|
|
78
76
|
},
|
|
79
77
|
|
|
80
|
-
|
|
81
|
-
|
|
78
|
+
'input[type=checkbox]:not(:checked) + &-disabled .form-switch-box': {
|
|
79
|
+
'@apply bg-gray-stroke': {},
|
|
82
80
|
},
|
|
83
81
|
|
|
84
|
-
|
|
85
82
|
// sizing
|
|
86
|
-
|
|
87
|
-
height:
|
|
88
|
-
width:
|
|
83
|
+
'&-sm': {
|
|
84
|
+
height: '2.16rem',
|
|
85
|
+
width: '3.6rem',
|
|
89
86
|
},
|
|
90
87
|
|
|
91
|
-
|
|
92
|
-
height:
|
|
93
|
-
width:
|
|
88
|
+
'&-md': {
|
|
89
|
+
height: '2.4rem',
|
|
90
|
+
width: '4rem',
|
|
94
91
|
},
|
|
95
92
|
|
|
96
|
-
|
|
97
|
-
height:
|
|
98
|
-
width:
|
|
93
|
+
'&-lg': {
|
|
94
|
+
height: '2.64rem',
|
|
95
|
+
width: '4.4rem',
|
|
99
96
|
},
|
|
100
97
|
},
|
|
101
98
|
|
|
102
99
|
// Knob
|
|
103
|
-
|
|
104
|
-
|
|
100
|
+
'.form-switch-box': {
|
|
101
|
+
'@apply transition-transform ease-in-out duration-150 transform bg-white rounded-full shadow translate-x-0': {},
|
|
105
102
|
|
|
106
103
|
// sizing
|
|
107
|
-
|
|
108
|
-
height:
|
|
109
|
-
width:
|
|
104
|
+
'&-sm': {
|
|
105
|
+
height: '1.6rem',
|
|
106
|
+
width: '1.7rem',
|
|
110
107
|
},
|
|
111
108
|
|
|
112
|
-
|
|
113
|
-
height:
|
|
114
|
-
width:
|
|
109
|
+
'&-md': {
|
|
110
|
+
height: '2rem',
|
|
111
|
+
width: '2rem',
|
|
115
112
|
},
|
|
116
113
|
|
|
117
|
-
|
|
118
|
-
height:
|
|
119
|
-
width:
|
|
114
|
+
'&-lg': {
|
|
115
|
+
height: '2.2rem',
|
|
116
|
+
width: '2.2rem',
|
|
120
117
|
},
|
|
121
118
|
},
|
|
122
119
|
});
|
package/src/components/table.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
module.exports = Table = () => ({
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
'.table': {
|
|
3
|
+
'@apply min-w-full border-collapse border-gray-stroke divide-gray-lighter table-auto': {},
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
'&-item': {
|
|
6
|
+
'@apply px-6 py-4 border border-gray-stroke whitespace-nowrap': {},
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
}
|
|
8
|
+
'&:nth-child(odd)': {
|
|
9
|
+
'@apply bg-gray-lighter': {},
|
|
10
|
+
},
|
|
12
11
|
},
|
|
13
|
-
}
|
|
12
|
+
},
|
|
13
|
+
});
|