@sk-web-gui/core 0.1.33 → 0.1.34
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 +43 -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 +2 -1
- 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/badge.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
module.exports = Badge = (colors) => ({
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
'.badge': {
|
|
3
|
+
'@apply inline-block text-xs font-medium leading-4 text-center whitespace-nowrap': {},
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
'&-light': {
|
|
6
|
+
'@apply text-body bg-neutral-200 border border-transparent': {},
|
|
7
|
+
'@apply dark:text-neutral-100 dark:bg-neutral-700': {},
|
|
8
8
|
|
|
9
9
|
...colors.reduce(
|
|
10
10
|
(styles, color) => ({
|
|
@@ -12,50 +12,49 @@ module.exports = Badge = (colors) => ({
|
|
|
12
12
|
[`&[data-color="${color}"]`]: {
|
|
13
13
|
[`@apply text-${color}-800 bg-${color}-100`]: {},
|
|
14
14
|
[`@apply dark:text-${color}-400 dark:bg-${color}-500`]: {},
|
|
15
|
-
|
|
15
|
+
'@apply dark:bg-opacity-15': {},
|
|
16
16
|
},
|
|
17
17
|
}),
|
|
18
18
|
{}
|
|
19
19
|
),
|
|
20
20
|
},
|
|
21
21
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
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
25
|
...colors.reduce(
|
|
26
26
|
(styles, color) => ({
|
|
27
27
|
...styles,
|
|
28
28
|
[`&[data-color="${color}"]`]: {
|
|
29
29
|
[`@apply bg-${color}-500`]: {},
|
|
30
30
|
[`@apply dark:text-${color}-400 dark:border-${color}-500 dark:bg-${color}-500`]: {},
|
|
31
|
-
|
|
32
|
-
|
|
31
|
+
'@apply dark:bg-opacity-15': {},
|
|
32
|
+
'@apply dark:border-opacity-40': {},
|
|
33
33
|
},
|
|
34
34
|
}),
|
|
35
35
|
{}
|
|
36
36
|
),
|
|
37
|
-
|
|
38
37
|
},
|
|
39
38
|
|
|
40
|
-
|
|
41
|
-
minWidth:
|
|
42
|
-
height:
|
|
39
|
+
'&-sm': {
|
|
40
|
+
minWidth: '14px',
|
|
41
|
+
height: '14px',
|
|
43
42
|
padding: 0,
|
|
44
|
-
lineHeight:
|
|
45
|
-
borderRadius:
|
|
43
|
+
lineHeight: '12px',
|
|
44
|
+
borderRadius: '2em',
|
|
46
45
|
},
|
|
47
46
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
minWidth:
|
|
51
|
-
height:
|
|
52
|
-
lineHeight:
|
|
53
|
-
borderRadius:
|
|
47
|
+
'&-md': {
|
|
48
|
+
'@apply px-1.5 py-0': {},
|
|
49
|
+
minWidth: '20px',
|
|
50
|
+
height: '20px',
|
|
51
|
+
lineHeight: '18px',
|
|
52
|
+
borderRadius: '2em',
|
|
54
53
|
},
|
|
55
54
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
55
|
+
'&-shadow': {
|
|
56
|
+
'@apply ring-1 ring-white': {},
|
|
57
|
+
'@apply dark:ring-black': {},
|
|
59
58
|
},
|
|
60
59
|
},
|
|
61
60
|
});
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
module.exports = Breadcrumb = () => ({
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
'.breadcrumb': {
|
|
3
|
+
'@apply text-body relative': {},
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
'&-item': {
|
|
6
|
+
'@apply inline-flex items-center whitespace-nowrap': {},
|
|
7
7
|
},
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
'&-separator': {
|
|
10
|
+
'@apply mx-2': {},
|
|
11
11
|
},
|
|
12
12
|
},
|
|
13
13
|
});
|
|
@@ -1,45 +1,45 @@
|
|
|
1
1
|
// TODO: how it works with prefix?
|
|
2
2
|
module.exports = ButtonGroup = () => ({
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
'.btn-group': {
|
|
4
|
+
'@apply inline-block': {},
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
boxSizing:
|
|
6
|
+
'&.btn-group-attached': {
|
|
7
|
+
'> .btn-icon': {
|
|
8
|
+
boxSizing: 'content-box',
|
|
9
9
|
},
|
|
10
|
-
|
|
11
|
-
borderTopRightRadius:
|
|
12
|
-
borderBottomRightRadius:
|
|
10
|
+
'> *:first-of-type:not(:last-of-type)': {
|
|
11
|
+
borderTopRightRadius: '0px',
|
|
12
|
+
borderBottomRightRadius: '0px',
|
|
13
13
|
},
|
|
14
14
|
|
|
15
|
-
|
|
16
|
-
borderRadius:
|
|
15
|
+
'> *:not(:first-of-type):not(:last-of-type)': {
|
|
16
|
+
borderRadius: '0px',
|
|
17
17
|
},
|
|
18
18
|
|
|
19
|
-
|
|
20
|
-
borderTopLeftRadius:
|
|
21
|
-
borderBottomLeftRadius:
|
|
19
|
+
'> *:not(:first-of-type):last-of-type': {
|
|
20
|
+
borderTopLeftRadius: '0px',
|
|
21
|
+
borderBottomLeftRadius: '0px',
|
|
22
22
|
},
|
|
23
23
|
|
|
24
|
-
|
|
25
|
-
borderRightWidth:
|
|
24
|
+
'> .btn-solid:not(:last-child), > .btn-outline:not(:last-child)': {
|
|
25
|
+
borderRightWidth: '0px',
|
|
26
26
|
},
|
|
27
27
|
|
|
28
|
-
|
|
29
|
-
borderRightWidth:
|
|
28
|
+
'> .btn-solid:hover, > .btn-outline:hover': {
|
|
29
|
+
borderRightWidth: '1px',
|
|
30
30
|
},
|
|
31
31
|
|
|
32
|
-
|
|
33
|
-
borderLeftWidth:
|
|
32
|
+
'> *:not(:last-of-type):hover + .btn-solid, > *:not(:last-of-type):hover + .btn-outline': {
|
|
33
|
+
borderLeftWidth: '0px',
|
|
34
34
|
},
|
|
35
35
|
|
|
36
|
-
|
|
37
|
-
zIndex:
|
|
38
|
-
borderRightWidth:
|
|
36
|
+
'> .btn-solid:focus, > .btn-outline:focus': {
|
|
37
|
+
zIndex: '1px',
|
|
38
|
+
borderRightWidth: '1px',
|
|
39
39
|
},
|
|
40
40
|
|
|
41
|
-
|
|
42
|
-
borderLeftWidth:
|
|
41
|
+
'> *:not(:last-of-type):focus + .btn-solid, > *:not(:last-of-type):focus + .btn-outline': {
|
|
42
|
+
borderLeftWidth: '0px',
|
|
43
43
|
},
|
|
44
44
|
},
|
|
45
45
|
},
|
package/src/components/button.js
CHANGED
|
@@ -1,28 +1,27 @@
|
|
|
1
1
|
function buttonSolid(colors) {
|
|
2
2
|
return {
|
|
3
|
-
|
|
3
|
+
'&-solid': {
|
|
4
4
|
//"@apply text-": {},
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
'@apply font-semibold border border-gray-stroke': {},
|
|
6
|
+
'@apply text-body bg-white': {},
|
|
7
7
|
/* hover */
|
|
8
|
-
|
|
8
|
+
'@apply hover:text-white hover:bg-hover hover:border-primary-active': {},
|
|
9
9
|
/* focus */
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
'@apply focus-visible:z-base': {},
|
|
11
|
+
'@apply focus-visible:border-primary': {},
|
|
12
|
+
'@apply focus-visible:ring-4 focus-visible:ring-black': {},
|
|
13
13
|
/* active */
|
|
14
|
-
|
|
15
|
-
|
|
14
|
+
'@apply active:bg-hover active:text-white': {},
|
|
16
15
|
|
|
17
16
|
/* dark mode */
|
|
18
|
-
|
|
19
|
-
|
|
17
|
+
'@apply dark:border-neutral-600': {},
|
|
18
|
+
'@apply dark:text-neutral-100 dark:bg-neutral-700': {},
|
|
20
19
|
/* dark hover */
|
|
21
|
-
|
|
20
|
+
'@apply dark:hover:border-hover dark:hover:bg-neutral-600': {},
|
|
22
21
|
/* dark focus */
|
|
23
|
-
|
|
22
|
+
'@apply dark:focus-visible:border-primary-500': {},
|
|
24
23
|
/* dark active */
|
|
25
|
-
|
|
24
|
+
'@apply dark:active:bg-neutral-900 dark:active:border-neutral-600': {},
|
|
26
25
|
|
|
27
26
|
...colors.reduce(
|
|
28
27
|
(styles, color) => ({
|
|
@@ -36,7 +35,6 @@ function buttonSolid(colors) {
|
|
|
36
35
|
[`@apply active:text-white active:bg-${color}-active`]: {},
|
|
37
36
|
[`@apply focus-visible:ring-4 focus-visible:ring-black`]: {},
|
|
38
37
|
|
|
39
|
-
|
|
40
38
|
// focus
|
|
41
39
|
//[`@apply focus-visible:bg-${color}-700`]: {},
|
|
42
40
|
//[`@apply focus-visible:border-${color}-500`]: {},
|
|
@@ -59,41 +57,40 @@ function buttonSolid(colors) {
|
|
|
59
57
|
),
|
|
60
58
|
|
|
61
59
|
"&[data-color='primary']": {
|
|
62
|
-
|
|
60
|
+
'@apply border-primary hover:border-primary-active': {},
|
|
63
61
|
},
|
|
64
62
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
63
|
+
'&.btn': {
|
|
64
|
+
'&-disabled': {
|
|
65
|
+
'@apply disabled:border-gray-stroke hover:border-gray-stroke': {},
|
|
68
66
|
},
|
|
69
67
|
},
|
|
70
|
-
|
|
71
68
|
},
|
|
72
69
|
};
|
|
73
70
|
}
|
|
74
71
|
|
|
75
72
|
function buttonOutline(colors) {
|
|
76
73
|
return {
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
74
|
+
'&-outline': {
|
|
75
|
+
'@apply font-semibold border border-gray-stroke': {},
|
|
76
|
+
'@apply text-body bg-transparent': {},
|
|
80
77
|
/* hover */
|
|
81
|
-
|
|
78
|
+
'@apply hover:text-white hover:bg-primary-active hover:border-primary-active': {},
|
|
82
79
|
/* focus */
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
80
|
+
'@apply focus-visible:z-base': {},
|
|
81
|
+
'@apply focus-visible:border-primary-500': {},
|
|
82
|
+
'@apply focus-visible:ring-4 focus-visible:ring-primary-500': {},
|
|
86
83
|
/* active */
|
|
87
|
-
|
|
84
|
+
'@apply active:bg-neutral-200': {},
|
|
88
85
|
/* dark mode */
|
|
89
|
-
|
|
90
|
-
|
|
86
|
+
'@apply dark:border-neutral-600': {},
|
|
87
|
+
'@apply dark:text-neutral-100 dark:bg-transparent': {},
|
|
91
88
|
/* dark hover */
|
|
92
|
-
|
|
89
|
+
'@apply dark:hover:border-neutral-300 dark:hover:bg-neutral-700': {},
|
|
93
90
|
/* dark focus */
|
|
94
|
-
|
|
91
|
+
'@apply dark:focus-visible:border-primary-500': {},
|
|
95
92
|
/* dark active */
|
|
96
|
-
|
|
93
|
+
'@apply dark:active:bg-neutral-600 dark:active:border-neutral-600': {},
|
|
97
94
|
|
|
98
95
|
...colors.reduce(
|
|
99
96
|
(styles, color) => ({
|
|
@@ -126,32 +123,31 @@ function buttonOutline(colors) {
|
|
|
126
123
|
{}
|
|
127
124
|
),
|
|
128
125
|
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
126
|
+
'&.btn': {
|
|
127
|
+
'&-disabled': {
|
|
128
|
+
'@apply disabled:border-gray-stroke hover:border-gray-stroke': {},
|
|
132
129
|
},
|
|
133
130
|
},
|
|
134
|
-
|
|
135
131
|
},
|
|
136
132
|
};
|
|
137
133
|
}
|
|
138
134
|
|
|
139
135
|
function buttonGhost(colors) {
|
|
140
136
|
return {
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
137
|
+
'&-ghost': {
|
|
138
|
+
'@apply text-body bg-transparent': {},
|
|
139
|
+
'@apply hover:bg-neutral-100': {},
|
|
144
140
|
/* focus */
|
|
145
|
-
|
|
146
|
-
|
|
141
|
+
'@apply focus-visible:z-base': {},
|
|
142
|
+
'@apply focus-visible:ring-4 focus-visible:ring-primary-500': {},
|
|
147
143
|
/* active */
|
|
148
|
-
|
|
144
|
+
'@apply active:bg-neutral-200': {},
|
|
149
145
|
/* dark mode */
|
|
150
|
-
|
|
146
|
+
'@apply dark:text-neutral-100 dark:bg-transparent': {},
|
|
151
147
|
/* dark hover */
|
|
152
|
-
|
|
148
|
+
'@apply dark:hover:border-neutral-300 dark:hover:bg-neutral-700': {},
|
|
153
149
|
/* dark active */
|
|
154
|
-
|
|
150
|
+
'@apply dark:active:bg-neutral-600 dark:active:border-neutral-400': {},
|
|
155
151
|
|
|
156
152
|
...colors.reduce(
|
|
157
153
|
(styles, color) => ({
|
|
@@ -178,27 +174,27 @@ function buttonGhost(colors) {
|
|
|
178
174
|
|
|
179
175
|
function buttonLight(colors) {
|
|
180
176
|
return {
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
177
|
+
'&-light': {
|
|
178
|
+
'@apply shadow-sm': {},
|
|
179
|
+
'@apply border border-transparent': {},
|
|
180
|
+
'@apply text-body bg-neutral-100': {},
|
|
185
181
|
/* hover */
|
|
186
|
-
|
|
182
|
+
'@apply hover:bg-neutral-200': {},
|
|
187
183
|
/* focus */
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
184
|
+
'@apply focus-visible:z-base': {},
|
|
185
|
+
'@apply focus-visible:border-primary-500': {},
|
|
186
|
+
'@apply focus-visible:ring-4 focus-visible:ring-primary-500': {},
|
|
191
187
|
/* active */
|
|
192
|
-
|
|
188
|
+
'@apply active:bg-neutral-300': {},
|
|
193
189
|
/* dark mode */
|
|
194
|
-
|
|
195
|
-
|
|
190
|
+
'@apply dark:border-transparent': {},
|
|
191
|
+
'@apply dark:text-neutral-100 dark:bg-neutral-700': {},
|
|
196
192
|
/* dark hover */
|
|
197
|
-
|
|
193
|
+
'@apply dark:hover:bg-neutral-600': {},
|
|
198
194
|
/* dark focus */
|
|
199
|
-
|
|
195
|
+
'@apply dark:focus-visible:border-primary-500': {},
|
|
200
196
|
/* dark active */
|
|
201
|
-
|
|
197
|
+
'@apply dark:active:bg-neutral-600': {},
|
|
202
198
|
|
|
203
199
|
...colors.reduce(
|
|
204
200
|
(styles, color) => ({
|
|
@@ -234,12 +230,12 @@ function buttonLight(colors) {
|
|
|
234
230
|
|
|
235
231
|
function buttonLink(colors) {
|
|
236
232
|
return {
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
233
|
+
'&-link': {
|
|
234
|
+
'@apply h-auto p-0 leading-normal text-neutral-600 hover:underline active:text-neutral-700': {},
|
|
235
|
+
'@apply focus-visible:z-base focus-visible:ring-4 focus-visible:ring-primary-500': {},
|
|
240
236
|
// dark colors
|
|
241
|
-
|
|
242
|
-
|
|
237
|
+
'@apply dark:text-neutral-200': {},
|
|
238
|
+
'@apply dark:active:text-neutral-500': {},
|
|
243
239
|
|
|
244
240
|
...colors.reduce(
|
|
245
241
|
(styles, color) => ({
|
|
@@ -259,43 +255,43 @@ function buttonLink(colors) {
|
|
|
259
255
|
}
|
|
260
256
|
|
|
261
257
|
module.exports = Button = (colors) => ({
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
transitionProperty:
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
258
|
+
'.btn': {
|
|
259
|
+
'@apply relative': {},
|
|
260
|
+
'@apply m-0': {},
|
|
261
|
+
'@apply rounded-lg inline-flex items-center justify-center flex-shrink-0 align-middle': {},
|
|
262
|
+
'@apply font-medium leading-tight': {},
|
|
263
|
+
transitionProperty: 'background-color, border-color, color, fill, stroke, box-shadow',
|
|
264
|
+
'@apply duration-75 ease-out': {},
|
|
265
|
+
'@apply outline-none appearance-none cursor-base select-none whitespace-nowrap': {},
|
|
266
|
+
'@apply focus-visible:outline-none': {},
|
|
271
267
|
|
|
272
|
-
padding:
|
|
268
|
+
padding: '1.2rem 3.2rem',
|
|
273
269
|
|
|
274
270
|
"&[data-rounded='true']": {
|
|
275
|
-
borderRadius:
|
|
271
|
+
borderRadius: '3.2rem',
|
|
276
272
|
},
|
|
277
273
|
|
|
278
274
|
// sizing
|
|
279
|
-
|
|
280
|
-
|
|
275
|
+
'&-sm': {
|
|
276
|
+
'@apply text-xs': {},
|
|
281
277
|
// minWidth: "1.75rem",
|
|
282
278
|
},
|
|
283
279
|
|
|
284
|
-
|
|
285
|
-
|
|
280
|
+
'&-md': {
|
|
281
|
+
'@apply text-sm': {},
|
|
286
282
|
// minWidth: "2rem",
|
|
287
283
|
},
|
|
288
284
|
|
|
289
|
-
|
|
290
|
-
|
|
285
|
+
'&-lg': {
|
|
286
|
+
'@apply text-base': {},
|
|
291
287
|
// minWidth: "2.5rem",
|
|
292
288
|
},
|
|
293
289
|
|
|
294
290
|
// State
|
|
295
291
|
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
292
|
+
'&-disabled': {
|
|
293
|
+
'@apply disabled:shadow-none disabled:cursor-not-allowed': {},
|
|
294
|
+
'@apply disabled:text-gray disabled:bg-gray-light !important': {},
|
|
299
295
|
},
|
|
300
296
|
|
|
301
297
|
// variants
|
|
@@ -1,81 +1,82 @@
|
|
|
1
1
|
module.exports = Calendar = () => ({
|
|
2
|
+
// Month row
|
|
3
|
+
'.MuiCalendarPicker-root > div:first-of-type': {
|
|
4
|
+
'@apply ml-2 -mr-2 px-10': {},
|
|
5
|
+
},
|
|
2
6
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
+
// Month
|
|
8
|
+
'.MuiCalendarPicker-root > div:first-of-type > div': {
|
|
9
|
+
'@apply font-bold text-base text-body': {},
|
|
10
|
+
},
|
|
7
11
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
+
// Arrow switchers
|
|
13
|
+
'.MuiCalendarPicker-root > div:first-of-type .MuiButtonBase-root .MuiSvgIcon-root': {
|
|
14
|
+
'@apply text-body text-lg': {},
|
|
15
|
+
},
|
|
16
|
+
'.MuiCalendarPicker-root > div:first-of-type .MuiButtonBase-root': {
|
|
17
|
+
'@apply border-solid border border-transparent focus:text-transparent hover:text-transparent focus:bg-transparent hover:bg-transparent focus:border-primary hover:border-primary':
|
|
18
|
+
{},
|
|
19
|
+
},
|
|
20
|
+
'.MuiCalendarPicker-root > div:first-of-type .MuiButtonBase-root': {
|
|
21
|
+
'@apply border-solid border border-transparent focus:text-transparent hover:text-transparent focus:bg-transparent hover:bg-transparent focus:border-primary hover:border-primary':
|
|
22
|
+
{},
|
|
23
|
+
},
|
|
24
|
+
// Arrow spacer
|
|
25
|
+
'.MuiCalendarPicker-root .MuiPickersArrowSwitcher-spacer': {
|
|
26
|
+
'@apply w-11': {},
|
|
27
|
+
},
|
|
28
|
+
// Disabled arrow
|
|
29
|
+
'.MuiCalendarPicker-root > div:first-of-type .MuiButtonBase-root[disabled] .MuiSvgIcon-root': {
|
|
30
|
+
'@apply text-gray-stroke': {},
|
|
31
|
+
},
|
|
12
32
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
".MuiCalendarPicker-root > div:first-of-type .MuiButtonBase-root": {
|
|
18
|
-
"@apply border-solid border border-transparent focus:text-transparent hover:text-transparent focus:bg-transparent hover:bg-transparent focus:border-primary hover:border-primary": {},
|
|
19
|
-
},
|
|
20
|
-
".MuiCalendarPicker-root > div:first-of-type .MuiButtonBase-root": {
|
|
21
|
-
"@apply border-solid border border-transparent focus:text-transparent hover:text-transparent focus:bg-transparent hover:bg-transparent focus:border-primary hover:border-primary": {},
|
|
22
|
-
},
|
|
23
|
-
// Arrow spacer
|
|
24
|
-
".MuiCalendarPicker-root .MuiPickersArrowSwitcher-spacer": {
|
|
25
|
-
"@apply w-11": {},
|
|
26
|
-
},
|
|
27
|
-
// Disabled arrow
|
|
28
|
-
".MuiCalendarPicker-root > div:first-of-type .MuiButtonBase-root[disabled] .MuiSvgIcon-root": {
|
|
29
|
-
"@apply text-gray-stroke": {},
|
|
30
|
-
},
|
|
33
|
+
// Weekdays
|
|
34
|
+
'.MuiCalendarPicker-root div > div:first-of-type > .MuiTypography-root': {
|
|
35
|
+
'@apply font-bold text-body text-base': {},
|
|
36
|
+
},
|
|
31
37
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
38
|
+
// Days-Grid
|
|
39
|
+
'.MuiCalendarPicker-root > div:last-of-type > div:last-of-type': {
|
|
40
|
+
'@apply min-h-min pb-6': {},
|
|
41
|
+
},
|
|
36
42
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
43
|
+
// Day picking
|
|
44
|
+
'.MuiCalendarPicker-root .MuiPickersDay-root': {
|
|
45
|
+
'@apply text-base': {},
|
|
46
|
+
},
|
|
47
|
+
'.MuiCalendarPicker-root .Mui-disabled': {
|
|
48
|
+
'@apply text-gray-stroke': {},
|
|
49
|
+
},
|
|
41
50
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
"@apply text-gray-stroke":{},
|
|
48
|
-
},
|
|
51
|
+
// Day picked
|
|
52
|
+
'.MuiCalendarPicker-root .MuiButtonBase-root.MuiPickersDay-root.Mui-selected': {
|
|
53
|
+
'@apply bg-background-one text-body focus-visible:bg-background-one hover:bg-background-one focus:bg-background-one':
|
|
54
|
+
{},
|
|
55
|
+
},
|
|
49
56
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
57
|
+
// Day hovered
|
|
58
|
+
'.MuiCalendarPicker-root .MuiPickersDay-root, .MuiCalendarPicker-root .MuiPickersDay-root.MuiPickersDay-today': {
|
|
59
|
+
'@apply border-primary border-solid focus-visible:border hover:bg-transparent focus:bg-transparent hover:border':
|
|
60
|
+
{},
|
|
61
|
+
},
|
|
54
62
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
63
|
+
// today
|
|
64
|
+
'.MuiCalendarPicker-root .MuiPickersDay-root.MuiPickersDay-today': {
|
|
65
|
+
'@apply border-0 hover:border': {},
|
|
66
|
+
},
|
|
59
67
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
68
|
+
'.calendar': {
|
|
69
|
+
// Input field
|
|
70
|
+
'.datepicker-input': {
|
|
71
|
+
'@apply relative': {},
|
|
63
72
|
},
|
|
64
73
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
".datepicker-input": {
|
|
68
|
-
"@apply relative": {},
|
|
69
|
-
},
|
|
70
|
-
|
|
71
|
-
".datepicker-input input": {
|
|
72
|
-
"@apply pl-20 cursor-pointer":{},
|
|
73
|
-
},
|
|
74
|
-
|
|
75
|
-
".datepicker-input-icon": {
|
|
76
|
-
"@apply pointer-events-none absolute m-6 top-0 left-0 text-xl fill-body":{},
|
|
77
|
-
},
|
|
74
|
+
'.datepicker-input input': {
|
|
75
|
+
'@apply pl-20 cursor-pointer': {},
|
|
78
76
|
},
|
|
79
77
|
|
|
80
|
-
|
|
81
|
-
}
|
|
78
|
+
'.datepicker-input-icon': {
|
|
79
|
+
'@apply pointer-events-none absolute m-6 top-0 left-0 text-xl fill-body': {},
|
|
80
|
+
},
|
|
81
|
+
},
|
|
82
|
+
});
|