@sk-web-gui/core 0.1.69 → 0.1.71
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/package.json +2 -2
- package/src/components/badge.js +140 -30
- package/src/components/forms.js +109 -96
- package/src/components/pagination.js +5 -4
- package/src/components/search-bar.js +2 -14
- package/src/components/side-menu.js +5 -5
- package/src/index.js +2 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sk-web-gui/core",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.71",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "src/index.js",
|
|
6
6
|
"files": [
|
|
@@ -31,5 +31,5 @@
|
|
|
31
31
|
"postcss-import": "^14.0.2",
|
|
32
32
|
"tailwindcss": "^2.2.4"
|
|
33
33
|
},
|
|
34
|
-
"gitHead": "
|
|
34
|
+
"gitHead": "da5a8271e573b0d6fa137cb15ab1a8bffde0a467"
|
|
35
35
|
}
|
package/src/components/badge.js
CHANGED
|
@@ -1,60 +1,170 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
'
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
'@apply text-body bg-neutral-200 border border-transparent': {},
|
|
7
|
-
'@apply dark:text-neutral-100 dark:bg-neutral-700': {},
|
|
1
|
+
function badgeSolid(colors) {
|
|
2
|
+
return {
|
|
3
|
+
'&-solid': {
|
|
4
|
+
'@apply border-2 border-white box-border': {},
|
|
5
|
+
'@apply text-white': {},
|
|
8
6
|
|
|
9
7
|
...colors.reduce(
|
|
10
8
|
(styles, color) => ({
|
|
11
9
|
...styles,
|
|
12
10
|
[`&[data-color="${color}"]`]: {
|
|
13
|
-
[`@apply
|
|
14
|
-
[`@apply
|
|
15
|
-
'@apply dark:bg-opacity-15': {},
|
|
11
|
+
//[`@apply border-${color}`]: {},
|
|
12
|
+
[`@apply text-white bg-${color}`]: {},
|
|
16
13
|
},
|
|
17
14
|
}),
|
|
18
15
|
{}
|
|
19
16
|
),
|
|
17
|
+
|
|
18
|
+
"&[data-color='primary']": {
|
|
19
|
+
'@apply bg-primary': {},
|
|
20
|
+
},
|
|
21
|
+
"&[data-color='warning']": {
|
|
22
|
+
'@apply bg-warning': {},
|
|
23
|
+
},
|
|
24
|
+
"&[data-color='error']": {
|
|
25
|
+
'@apply bg-error': {},
|
|
26
|
+
},
|
|
27
|
+
"&[data-color='neutral']": {
|
|
28
|
+
'@apply bg-neutral-400': {},
|
|
29
|
+
},
|
|
30
|
+
|
|
20
31
|
},
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
function badgeOutline(colors) {
|
|
36
|
+
return {
|
|
37
|
+
'&-outline': {
|
|
38
|
+
'@apply border border-gray-stroke': {},
|
|
39
|
+
'@apply text-body bg-transparent': {},
|
|
21
40
|
|
|
22
|
-
'&-solid': {
|
|
23
|
-
'@apply text-white bg-neutral-500 border border-transparent': {},
|
|
24
|
-
'@apply dark:border-neutral-600 dark:text-neutral-100 dark:bg-neutral-700': {},
|
|
25
41
|
...colors.reduce(
|
|
26
42
|
(styles, color) => ({
|
|
27
43
|
...styles,
|
|
28
44
|
[`&[data-color="${color}"]`]: {
|
|
29
|
-
[`@apply
|
|
30
|
-
[`@apply
|
|
31
|
-
|
|
32
|
-
'@apply dark:border-opacity-40': {},
|
|
45
|
+
[`@apply border-current`]: {},
|
|
46
|
+
[`@apply text-${color}`]: {},
|
|
47
|
+
|
|
33
48
|
},
|
|
34
49
|
}),
|
|
35
50
|
{}
|
|
36
51
|
),
|
|
52
|
+
|
|
53
|
+
'&.badge': {
|
|
54
|
+
'&-disabled': {
|
|
55
|
+
'@apply disabled:border-gray-stroke hover:border-gray-stroke': {},
|
|
56
|
+
'&.active': {
|
|
57
|
+
'@apply border-gray-stroke': {},
|
|
58
|
+
},
|
|
59
|
+
},
|
|
60
|
+
},
|
|
61
|
+
|
|
62
|
+
"&[data-color='primary']": {
|
|
63
|
+
'@apply border-primary': {},
|
|
64
|
+
'@apply text-primary': {},
|
|
65
|
+
},
|
|
66
|
+
"&[data-color='warning']": {
|
|
67
|
+
'@apply border-warning': {},
|
|
68
|
+
'@apply text-warning': {},
|
|
69
|
+
},
|
|
70
|
+
"&[data-color='error']": {
|
|
71
|
+
'@apply border-error': {},
|
|
72
|
+
'@apply text-error': {},
|
|
73
|
+
},
|
|
74
|
+
"&[data-color='neutral']": {
|
|
75
|
+
'@apply border-neutral-300': {},
|
|
76
|
+
'@apply border-neutral-300': {},
|
|
77
|
+
|
|
78
|
+
},
|
|
79
|
+
},
|
|
80
|
+
};
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
module.exports = badge = (colors) => ({
|
|
85
|
+
'.badge': {
|
|
86
|
+
'@apply relative': {},
|
|
87
|
+
'@apply m-0': {},
|
|
88
|
+
'@apply inline-flex items-center justify-center content-center align-middle': {},
|
|
89
|
+
'@apply font-medium leading-none': {},
|
|
90
|
+
|
|
91
|
+
'&-fullrounded': {
|
|
92
|
+
'@apply rounded-full': {},
|
|
93
|
+
},
|
|
94
|
+
|
|
95
|
+
//rounding
|
|
96
|
+
'&-roundedcorners-md': {
|
|
97
|
+
'@apply rounded-3xl px-sm': {},
|
|
98
|
+
},
|
|
99
|
+
|
|
100
|
+
'&-roundedcorners-lg': {
|
|
101
|
+
'@apply rounded-3xl px-sm': {},
|
|
37
102
|
},
|
|
38
103
|
|
|
104
|
+
// sizing
|
|
39
105
|
'&-sm': {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
borderRadius: '2em',
|
|
106
|
+
'@apply text-opacity-0 text-[0rem] overflow-hidden rounded-full': {},
|
|
107
|
+
minHeight: '9px',
|
|
108
|
+
maxHeight: '9px',
|
|
109
|
+
minWidth: '9px',
|
|
45
110
|
},
|
|
46
111
|
|
|
47
112
|
'&-md': {
|
|
48
|
-
'@apply
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
113
|
+
'@apply text-xs font-bold': {},
|
|
114
|
+
minHeight: '23px',
|
|
115
|
+
maxHeight: '23px',
|
|
116
|
+
minWidth: '23px',
|
|
117
|
+
|
|
118
|
+
},
|
|
119
|
+
|
|
120
|
+
'&-lg': {
|
|
121
|
+
'@apply text-sm font-bold': {},
|
|
122
|
+
minHeight: '27px',
|
|
123
|
+
maxHeight: '27px',
|
|
124
|
+
minWidth: '27px',
|
|
125
|
+
|
|
126
|
+
},
|
|
127
|
+
|
|
128
|
+
'&-standard-sm': {
|
|
129
|
+
'@apply right-[-4px] self-center' : {},
|
|
130
|
+
},
|
|
131
|
+
'&-standard-md': {
|
|
132
|
+
'@apply right-[-4px] self-center': {},
|
|
133
|
+
},
|
|
134
|
+
'&-standard-lg': {
|
|
135
|
+
'@apply right-[-4px] self-center': {},
|
|
136
|
+
},
|
|
137
|
+
|
|
138
|
+
'&-super-sm': {
|
|
139
|
+
'@apply right-[-2px] top-[-5px]': {},
|
|
53
140
|
},
|
|
141
|
+
'&-super-md': {
|
|
142
|
+
'@apply right-[-3px] top-[-8px]': {},
|
|
143
|
+
},
|
|
144
|
+
'&-super-lg': {
|
|
145
|
+
'@apply right-[-4px] top-[-8px]': {},
|
|
146
|
+
},
|
|
147
|
+
|
|
148
|
+
'&-superoverlap-sm': {
|
|
149
|
+
'@apply right-[3px] top-[-5px]': {},
|
|
150
|
+
},
|
|
151
|
+
'&-superoverlap-md': {
|
|
152
|
+
'@apply right-[8px] top-[-6px]': {},
|
|
153
|
+
},
|
|
154
|
+
'&-superoverlap-lg': {
|
|
155
|
+
'@apply right-[8px] top-[-8px]': {},
|
|
156
|
+
},
|
|
157
|
+
|
|
54
158
|
|
|
55
|
-
'&-
|
|
56
|
-
'@apply
|
|
57
|
-
|
|
159
|
+
'&-fit-content': {
|
|
160
|
+
'@apply p-0': {},
|
|
161
|
+
fontSize: 'inherit',
|
|
58
162
|
},
|
|
163
|
+
|
|
164
|
+
|
|
165
|
+
// variants
|
|
166
|
+
...badgeSolid(colors),
|
|
167
|
+
...badgeOutline(colors),
|
|
168
|
+
|
|
59
169
|
},
|
|
60
170
|
});
|
package/src/components/forms.js
CHANGED
|
@@ -3,37 +3,6 @@ function fieldOutline(colors) {
|
|
|
3
3
|
'&-outline': {
|
|
4
4
|
'@apply border shadow-sm border-gray-stroke': {},
|
|
5
5
|
'@apply text-gray bg-white': {},
|
|
6
|
-
//"@apply hover:border-neutral-300": {},
|
|
7
|
-
|
|
8
|
-
'&[aria-invalid=true]': {
|
|
9
|
-
'--tw-border-opacity': '1',
|
|
10
|
-
borderColor: 'rgba(220, 38, 38, var(--tw-border-opacity))',
|
|
11
|
-
'--tw-ring-offset-shadow': 'var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)',
|
|
12
|
-
'--tw-ring-shadow': 'var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)',
|
|
13
|
-
boxShadow: 'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)',
|
|
14
|
-
'--tw-ring-opacity': '1',
|
|
15
|
-
'--tw-ring-color': 'rgba(220, 38, 38, var(--tw-ring-opacity))',
|
|
16
|
-
},
|
|
17
|
-
'focus-visible:ring-4': {},
|
|
18
|
-
/* dark mode */
|
|
19
|
-
'@apply dark:border-neutral-700': {},
|
|
20
|
-
'@apply dark:text-neutral-100 dark:bg-base': {},
|
|
21
|
-
'@apply dark:hover:border-neutral-600': {},
|
|
22
|
-
|
|
23
|
-
'.dark &[aria-invalid=true]': {
|
|
24
|
-
'--tw-border-opacity': '1',
|
|
25
|
-
borderColor: 'rgba(248, 113, 113, var(--tw-border-opacity))',
|
|
26
|
-
'--tw-ring-opacity': '1',
|
|
27
|
-
'--tw-ring-color': 'rgba(248, 113, 113, var(--tw-ring-opacity))',
|
|
28
|
-
},
|
|
29
|
-
'@media (prefers-color-scheme: dark)': {
|
|
30
|
-
'&[aria-invalid=true]': {
|
|
31
|
-
'--tw-border-opacity': '1',
|
|
32
|
-
borderColor: 'rgba(248, 113, 113, var(--tw-border-opacity))',
|
|
33
|
-
'--tw-ring-opacity': '1',
|
|
34
|
-
'--tw-ring-color': 'rgba(248, 113, 113, var(--tw-ring-opacity))',
|
|
35
|
-
},
|
|
36
|
-
},
|
|
37
6
|
|
|
38
7
|
...colors.reduce(
|
|
39
8
|
(styles, color) => ({
|
|
@@ -45,6 +14,14 @@ function fieldOutline(colors) {
|
|
|
45
14
|
}),
|
|
46
15
|
{}
|
|
47
16
|
),
|
|
17
|
+
|
|
18
|
+
'&[aria-invalid=true]': {
|
|
19
|
+
'@apply border-error ring-error': {},
|
|
20
|
+
|
|
21
|
+
'&:focus-visible': {
|
|
22
|
+
'@apply border-error ring-error': {},
|
|
23
|
+
},
|
|
24
|
+
},
|
|
48
25
|
},
|
|
49
26
|
};
|
|
50
27
|
}
|
|
@@ -54,35 +31,6 @@ function fieldSolid(colors) {
|
|
|
54
31
|
'&-solid': {
|
|
55
32
|
'@apply border border-transparent': {},
|
|
56
33
|
'@apply text-black bg-gray-light': {},
|
|
57
|
-
//"@apply hover:bg-gray-200": {},
|
|
58
|
-
|
|
59
|
-
'&[aria-invalid=true]': {
|
|
60
|
-
'--tw-border-opacity': '1',
|
|
61
|
-
borderColor: 'rgba(220, 38, 38, var(--tw-border-opacity))',
|
|
62
|
-
'--tw-ring-offset-shadow': 'var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)',
|
|
63
|
-
'--tw-ring-shadow': 'var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)',
|
|
64
|
-
boxShadow: 'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)',
|
|
65
|
-
'--tw-ring-opacity': '1',
|
|
66
|
-
'--tw-ring-color': 'rgba(220, 38, 38, var(--tw-ring-opacity))',
|
|
67
|
-
},
|
|
68
|
-
'focus-visible:ring-4': {},
|
|
69
|
-
/* dark mode */
|
|
70
|
-
'@apply dark:text-neutral-100 dark:bg-white/50': {},
|
|
71
|
-
'@apply dark:hover:bg-white/100': {},
|
|
72
|
-
'.dark &[aria-invalid=true]': {
|
|
73
|
-
'--tw-border-opacity': '1',
|
|
74
|
-
borderColor: 'rgba(248, 113, 113, var(--tw-border-opacity))',
|
|
75
|
-
'--tw-ring-opacity': '1',
|
|
76
|
-
'--tw-ring-color': 'rgba(248, 113, 113, var(--tw-ring-opacity))',
|
|
77
|
-
},
|
|
78
|
-
'@media (prefers-color-scheme: dark)': {
|
|
79
|
-
'&[aria-invalid=true]': {
|
|
80
|
-
'--tw-border-opacity': '1',
|
|
81
|
-
borderColor: 'rgba(248, 113, 113, var(--tw-border-opacity))',
|
|
82
|
-
'--tw-ring-opacity': '1',
|
|
83
|
-
'--tw-ring-color': 'rgba(248, 113, 113, var(--tw-ring-opacity))',
|
|
84
|
-
},
|
|
85
|
-
},
|
|
86
34
|
|
|
87
35
|
...colors.reduce(
|
|
88
36
|
(styles, color) => ({
|
|
@@ -94,6 +42,14 @@ function fieldSolid(colors) {
|
|
|
94
42
|
}),
|
|
95
43
|
{}
|
|
96
44
|
),
|
|
45
|
+
|
|
46
|
+
'&[aria-invalid=true]': {
|
|
47
|
+
'@apply border-error ring-error': {},
|
|
48
|
+
|
|
49
|
+
'&:focus-visible': {
|
|
50
|
+
'@apply border-error ring-error': {},
|
|
51
|
+
},
|
|
52
|
+
},
|
|
97
53
|
},
|
|
98
54
|
};
|
|
99
55
|
}
|
|
@@ -107,20 +63,10 @@ function formControl() {
|
|
|
107
63
|
'@apply mt-1.5 leading-none text-gray dark:text-white/60': {},
|
|
108
64
|
},
|
|
109
65
|
'.form-error-message': {
|
|
110
|
-
'@apply mt-1.5 leading-none flex items-center text-sm': {},
|
|
111
|
-
'--tw-text-opacity': '1',
|
|
112
|
-
color: 'rgba(239, 68, 68, var(--tw-text-opacity))',
|
|
113
|
-
'.dark &': {
|
|
114
|
-
'--tw-text-opacity': '1',
|
|
115
|
-
color: 'rgba(252, 165, 165, var(--tw-text-opacity))',
|
|
116
|
-
},
|
|
66
|
+
'@apply mt-1.5 leading-none flex items-center text-sm text-error': {},
|
|
117
67
|
},
|
|
118
68
|
'.form-label': {
|
|
119
69
|
'@apply text-sm font-medium text-left align-middle block mb-1.5': {},
|
|
120
|
-
|
|
121
|
-
'&-disabled': {
|
|
122
|
-
//"@apply opacity-60": {},
|
|
123
|
-
},
|
|
124
70
|
},
|
|
125
71
|
'.form-required-indicator': {
|
|
126
72
|
'@apply ml-1 text-sm': {},
|
|
@@ -137,7 +83,59 @@ function formControl() {
|
|
|
137
83
|
function formInputGroup() {
|
|
138
84
|
return {
|
|
139
85
|
'.form-input-group': {
|
|
140
|
-
'@apply flex relative': {},
|
|
86
|
+
'@apply flex relative h-fit w-full rounded-[0.2rem] border border-gray-stroke': {},
|
|
87
|
+
|
|
88
|
+
'&:focus-within': {
|
|
89
|
+
'@apply border border-primary ring-primary ring-1': {},
|
|
90
|
+
},
|
|
91
|
+
|
|
92
|
+
'> *': {
|
|
93
|
+
'@apply border-0 ring-0': {},
|
|
94
|
+
|
|
95
|
+
'&:focus': {
|
|
96
|
+
'@apply ring-0': {},
|
|
97
|
+
},
|
|
98
|
+
},
|
|
99
|
+
|
|
100
|
+
'&-sm': {
|
|
101
|
+
'@apply min-h-[4rem] max-h-[4rem]': {},
|
|
102
|
+
|
|
103
|
+
'.form-field': {
|
|
104
|
+
'@apply min-h-[3.8rem] max-h-[3.8rem]': {},
|
|
105
|
+
},
|
|
106
|
+
},
|
|
107
|
+
|
|
108
|
+
'&-md': {
|
|
109
|
+
'@apply min-h-[4.4rem] max-h-[4.4rem]': {},
|
|
110
|
+
|
|
111
|
+
'.form-field': {
|
|
112
|
+
'@apply min-h-[4.2rem] max-h-[4.2rem]': {},
|
|
113
|
+
},
|
|
114
|
+
},
|
|
115
|
+
|
|
116
|
+
'&-lg': {
|
|
117
|
+
'@apply min-h-[4.8rem] max-h-[4.8rem]': {},
|
|
118
|
+
|
|
119
|
+
'.form-field': {
|
|
120
|
+
'@apply min-h-[4.6rem] max-h-[4.6rem]': {},
|
|
121
|
+
},
|
|
122
|
+
},
|
|
123
|
+
|
|
124
|
+
"&[data-rounded='true']": {
|
|
125
|
+
'@apply rounded-[3.2rem]': {},
|
|
126
|
+
|
|
127
|
+
'> *:first-child': {
|
|
128
|
+
'@apply rounded-[3.2rem]': {},
|
|
129
|
+
},
|
|
130
|
+
|
|
131
|
+
'> *:last-child': {
|
|
132
|
+
'@apply rounded-[3.2rem]': {},
|
|
133
|
+
},
|
|
134
|
+
},
|
|
135
|
+
|
|
136
|
+
'&[aria-invalid=true]': {
|
|
137
|
+
'@apply border-error ring-error': {},
|
|
138
|
+
},
|
|
141
139
|
},
|
|
142
140
|
|
|
143
141
|
'.form-input-element': {
|
|
@@ -157,8 +155,7 @@ function formInputGroup() {
|
|
|
157
155
|
},
|
|
158
156
|
|
|
159
157
|
'.form-input-addon': {
|
|
160
|
-
'@apply flex items-center w-auto
|
|
161
|
-
'@apply border border-neutral-300': {},
|
|
158
|
+
'@apply flex items-center w-auto shadow-sm whitespace-nowrap': {},
|
|
162
159
|
'@apply text-neutral-600 bg-neutral-50': {},
|
|
163
160
|
// dark colors
|
|
164
161
|
'@apply dark:border-neutral-700': {},
|
|
@@ -177,11 +174,35 @@ function formInputGroup() {
|
|
|
177
174
|
},
|
|
178
175
|
|
|
179
176
|
'&-left': {
|
|
180
|
-
'@apply
|
|
177
|
+
'@apply rounded-r-none': {},
|
|
181
178
|
},
|
|
182
179
|
|
|
183
180
|
'&-right': {
|
|
184
|
-
'@apply
|
|
181
|
+
'@apply rounded-l-none': {},
|
|
182
|
+
},
|
|
183
|
+
},
|
|
184
|
+
'.form-input-addin': {
|
|
185
|
+
'@apply flex items-center w-auto whitespace-nowrap': {},
|
|
186
|
+
'@apply text-body': {},
|
|
187
|
+
|
|
188
|
+
'&-sm': {
|
|
189
|
+
'@apply px-[1.44rem] text-xs': {},
|
|
190
|
+
},
|
|
191
|
+
|
|
192
|
+
'&-md': {
|
|
193
|
+
'@apply px-[1.6rem] text-sm': {},
|
|
194
|
+
},
|
|
195
|
+
|
|
196
|
+
'&-lg': {
|
|
197
|
+
'@apply px-[1.76rem] text-base': {},
|
|
198
|
+
},
|
|
199
|
+
|
|
200
|
+
'&-left': {
|
|
201
|
+
'@apply pr-0 rounded-r-none': {},
|
|
202
|
+
},
|
|
203
|
+
|
|
204
|
+
'&-right': {
|
|
205
|
+
'@apply pl-0 rounded-l-none': {},
|
|
185
206
|
},
|
|
186
207
|
},
|
|
187
208
|
};
|
|
@@ -189,44 +210,32 @@ function formInputGroup() {
|
|
|
189
210
|
|
|
190
211
|
module.exports = Forms = (colors) => ({
|
|
191
212
|
'.form-field': {
|
|
192
|
-
'@apply placeholder-gray-stroke': {},
|
|
213
|
+
'@apply rounded-[0.2rem] placeholder-gray-stroke': {},
|
|
193
214
|
'@apply relative w-full min-w-0 inline-flex items-center appearance-none focus-visible:outline-none': {},
|
|
194
215
|
'@apply transition-colors duration-75 ease-out': {},
|
|
195
216
|
|
|
196
217
|
'&-sm': {
|
|
197
218
|
'@apply text-sm leading-sm': {},
|
|
198
|
-
|
|
199
|
-
padding: '0 1.44rem',
|
|
200
|
-
minHeight: '4rem',
|
|
201
|
-
maxHeight: '4rem',
|
|
219
|
+
'@apply py-0 px-[1.44rem] min-h-[4rem] max-h-[4rem]': {},
|
|
202
220
|
},
|
|
203
221
|
|
|
204
222
|
'&-md': {
|
|
205
223
|
'@apply text-base leading-base': {},
|
|
206
|
-
|
|
207
|
-
padding: '0 1.6rem',
|
|
208
|
-
minHeight: '4.4rem',
|
|
209
|
-
maxHeight: '4.4rem',
|
|
224
|
+
'@apply py-0 px-[1.6rem] min-h-[4.4rem] max-h-[4.4rem]': {},
|
|
210
225
|
},
|
|
211
226
|
|
|
212
227
|
'&-lg': {
|
|
213
|
-
'@apply text-
|
|
214
|
-
|
|
215
|
-
padding: '0 1.76rem',
|
|
216
|
-
minHeight: '4.8rem',
|
|
217
|
-
maxHeight: '4.8rem',
|
|
228
|
+
'@apply text-base leading-lg': {},
|
|
229
|
+
'@apply py-0 px-[1.76rem] min-h-[4.8rem] max-h-[4.8rem]': {},
|
|
218
230
|
},
|
|
219
231
|
|
|
220
232
|
'&-disabled, &&-disabled': {
|
|
221
233
|
'@apply disabled:cursor-not-allowed cursor-not-allowed': {},
|
|
222
234
|
'@apply disabled:bg-gray-lighter bg-gray-lighter': {},
|
|
223
|
-
//"@apply disabled:shadow-none disabled:cursor-not-allowed disabled:opacity-60": {},
|
|
224
|
-
//"@apply disabled:border-neutral-200 disabled:bg-neutral-200": {},
|
|
225
|
-
//"@apply dark:disabled:border-transparent dark:disabled:bg-white/20": {},
|
|
226
235
|
},
|
|
227
236
|
|
|
228
237
|
"&[data-rounded='true']": {
|
|
229
|
-
|
|
238
|
+
'@apply rounded-[3.2rem]': {},
|
|
230
239
|
},
|
|
231
240
|
|
|
232
241
|
// variants
|
|
@@ -234,8 +243,12 @@ module.exports = Forms = (colors) => ({
|
|
|
234
243
|
...fieldSolid(colors),
|
|
235
244
|
},
|
|
236
245
|
|
|
237
|
-
'.form-
|
|
238
|
-
'@apply border-0 ml-auto': {},
|
|
246
|
+
'.form-button': {
|
|
247
|
+
'@apply text-[1.1433em] border-0 ml-auto text-primary hover:text-white': {},
|
|
248
|
+
|
|
249
|
+
'&[data-icon=true]': {
|
|
250
|
+
'@apply p-[0.2em]': {},
|
|
251
|
+
},
|
|
239
252
|
|
|
240
253
|
'&-icon': {
|
|
241
254
|
'@apply inline-flex': {},
|
|
@@ -15,11 +15,11 @@ module.exports = Pagination = () => ({
|
|
|
15
15
|
},
|
|
16
16
|
|
|
17
17
|
'&-list': {
|
|
18
|
-
'@apply flex items-
|
|
18
|
+
'@apply flex items-center': {},
|
|
19
19
|
},
|
|
20
20
|
|
|
21
21
|
'&-pageLabel': {
|
|
22
|
-
'@apply cursor-pointer m-sm': {},
|
|
22
|
+
'@apply cursor-pointer m-sm box-content': {},
|
|
23
23
|
width: '1.5em',
|
|
24
24
|
height: '1.75em',
|
|
25
25
|
|
|
@@ -29,7 +29,8 @@ module.exports = Pagination = () => ({
|
|
|
29
29
|
},
|
|
30
30
|
|
|
31
31
|
'&-prevNextButton': {
|
|
32
|
-
'@apply text-body ml-4 inline-flex items-center sm:w-auto inline-flex flex-row leading-none': {},
|
|
32
|
+
'@apply text-body ml-4 my-sm inline-flex items-center sm:w-auto inline-flex flex-row leading-none': {},
|
|
33
|
+
height: '1.75em',
|
|
33
34
|
|
|
34
35
|
'&[data-reverse=true]': {
|
|
35
36
|
'@apply mr-4 ml-0 flex-row-reverse': {},
|
|
@@ -54,7 +55,7 @@ module.exports = Pagination = () => ({
|
|
|
54
55
|
},
|
|
55
56
|
|
|
56
57
|
'&-icon': {
|
|
57
|
-
'@apply m-1
|
|
58
|
+
'@apply m-1 leading-none flex items-center': {},
|
|
58
59
|
|
|
59
60
|
'.MuiSvgIcon-root': {
|
|
60
61
|
fontSize: '1em',
|
|
@@ -1,17 +1,5 @@
|
|
|
1
1
|
module.exports = SearchBar = () => ({
|
|
2
|
-
'.
|
|
3
|
-
|
|
4
|
-
position: 'relative',
|
|
5
|
-
|
|
6
|
-
'.search-button': {
|
|
7
|
-
'@apply flex items-center absolute inset-y-0 right-md text-primary': {},
|
|
8
|
-
'&-icon': {
|
|
9
|
-
'@apply !text-2xl': {},
|
|
10
|
-
|
|
11
|
-
'&.small': {
|
|
12
|
-
'@apply h-[13px] w-[13px]': {},
|
|
13
|
-
},
|
|
14
|
-
},
|
|
15
|
-
},
|
|
2
|
+
'.search-bar': {
|
|
3
|
+
'@apply w-full relative': {},
|
|
16
4
|
},
|
|
17
5
|
});
|
|
@@ -3,11 +3,7 @@ module.exports = Menu = () => ({
|
|
|
3
3
|
'@apply w-[440px]': {},
|
|
4
4
|
|
|
5
5
|
'.menu-header': {
|
|
6
|
-
'@apply py-[2rem] px-[1.6rem] bg-primary text-white
|
|
7
|
-
|
|
8
|
-
'label, .label': {
|
|
9
|
-
'@apply text-xl font-bold text-white': {},
|
|
10
|
-
},
|
|
6
|
+
'@apply py-[2rem] px-[1.6rem] rounded-t-[.2rem] bg-primary text-white': {},
|
|
11
7
|
|
|
12
8
|
'.label-small': {
|
|
13
9
|
'@apply text-[1.6rem]': {},
|
|
@@ -24,6 +20,10 @@ module.exports = Menu = () => ({
|
|
|
24
20
|
'.label-header': {
|
|
25
21
|
'@apply flex items-center': {},
|
|
26
22
|
|
|
23
|
+
'label, .label': {
|
|
24
|
+
'@apply text-xl font-bold': {},
|
|
25
|
+
},
|
|
26
|
+
|
|
27
27
|
span: {
|
|
28
28
|
'@apply ml-auto': {},
|
|
29
29
|
},
|
package/src/index.js
CHANGED
|
@@ -6,6 +6,7 @@ const withOpacity = require('./with-opacity');
|
|
|
6
6
|
// components
|
|
7
7
|
const Alert = require('./components/alert');
|
|
8
8
|
const AlertBanner = require('./components/alert-banner');
|
|
9
|
+
const Badge = require('./components/badge');
|
|
9
10
|
const Breadcrumb = require('./components/breadcrumb');
|
|
10
11
|
const ButtonGroup = require('./components/button-group');
|
|
11
12
|
|
|
@@ -49,6 +50,7 @@ const SearchBar = require('./components/search-bar');
|
|
|
49
50
|
const components = [
|
|
50
51
|
Alert,
|
|
51
52
|
AlertBanner,
|
|
53
|
+
Badge,
|
|
52
54
|
Breadcrumb,
|
|
53
55
|
ButtonGroup,
|
|
54
56
|
Button,
|