@pzh-ui/css 0.0.104 → 0.0.107

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.
Files changed (7) hide show
  1. package/.yarn/install-state.gz +0 -0
  2. package/config/{custom.js → custom.ts} +1 -2
  3. package/config/index.ts +25 -0
  4. package/package.json +23 -26
  5. package/src/tailwind.css +2563 -3415
  6. package/src/tailwind.src.css +376 -238
  7. package/config/index.js +0 -216
package/src/tailwind.src.css CHANGED
@@ -1,37 +1,175 @@
1
- @import "tailwindcss/base";
2
- @import "tailwindcss/components";
3
- @import "tailwindcss/utilities";
1
+ @import 'tailwindcss' source('../../components/src');
2
+ @plugin "@tailwindcss/typography";
3
+
4
+ @theme {
5
+ /* Screens */
6
+ --screen-sm: 640px;
7
+ --screen-md: 768px;
8
+ --screen-lg: 1024px;
9
+ --screen-xl: 1280px;
10
+ --screen-2xl: 1440px;
11
+
12
+ /* Font sizes */
13
+ --text-s: 1rem;
14
+ --text-s--line-height: 1.5rem;
15
+
16
+ --text-m: 1.25rem;
17
+ --text-m--line-height: 1.875rem;
18
+
19
+ --text-l: 1.5rem;
20
+ --text-l--line-height: 1.875rem;
21
+
22
+ --text-heading-xs: 1.125rem;
23
+ --text-heading-xs--line-height: 125%;
24
+
25
+ --text-heading-s: 1.25rem;
26
+ --text-heading-s--line-height: 125%;
27
+
28
+ --text-heading-m: 1.5rem;
29
+ --text-heading-m--line-height: 125%;
30
+
31
+ --text-heading-l: 2rem;
32
+ --text-heading-l--line-height: 125%;
33
+
34
+ --text-heading-xl: 2.5rem;
35
+ --text-heading-xl--line-height: 125%;
36
+
37
+ --text-heading-xxl: 3rem;
38
+ --text-heading-xxl--line-height: 125%;
39
+
40
+ --text-heading-xxxl: 4rem;
41
+ --text-heading-xxxl--line-height: 110%;
42
+
43
+ /* Custom Colors */
44
+ --color-*: initial;
45
+
46
+ --color-pzh-white: #fff;
47
+ --color-pzh-black: #000000;
48
+
49
+ --color-pzh-form: #f4f4f7;
50
+
51
+ --color-pzh-red-10: #ffedf0;
52
+ --color-pzh-red-100: #eb7085;
53
+ --color-pzh-red-500: #d11f3d;
54
+ --color-pzh-red-900: #97162c;
55
+
56
+ --color-pzh-yellow-10: #fff9e3;
57
+ --color-pzh-yellow-100: #f1db7e;
58
+ --color-pzh-yellow-500: #efcc36;
59
+ --color-pzh-yellow-900: #c6a410;
60
+
61
+ --color-pzh-blue-10: #f2f7fc;
62
+ --color-pzh-blue-100: #7badde;
63
+ --color-pzh-blue-500: #281f6b;
64
+ --color-pzh-blue-900: #16113b;
65
+
66
+ --color-pzh-pink-100: #d76aac;
67
+ --color-pzh-pink-500: #aa0067;
68
+ --color-pzh-pink-900: #750047;
69
+
70
+ --color-pzh-orange-100: #fba66a;
71
+ --color-pzh-orange-500: #ff6b02;
72
+ --color-pzh-orange-900: #b24a00;
73
+
74
+ --color-pzh-apple-green-100: #add57d;
75
+ --color-pzh-apple-green-500: #76bc21;
76
+ --color-pzh-apple-green-900: #629623;
77
+
78
+ --color-pzh-purple-100: #9b99cc;
79
+ --color-pzh-purple-500: #503d90;
80
+ --color-pzh-purple-900: #32265a;
81
+
82
+ --color-pzh-warm-gray-100: #beb1a7;
83
+ --color-pzh-warm-gray-500: #847062;
84
+ --color-pzh-warm-gray-900: #584b41;
85
+
86
+ --color-pzh-green-10: #edfaf0;
87
+ --color-pzh-green-100: #61b375;
88
+ --color-pzh-green-500: #00804d;
89
+ --color-pzh-green-900: #004d2e;
90
+
91
+ --color-pzh-gray-100: #f8f8f8;
92
+ --color-pzh-gray-200: #e6e6e6;
93
+ --color-pzh-gray-300: #d5d5d5;
94
+ --color-pzh-gray-400: #bfbfbf;
95
+ --color-pzh-gray-500: #838383;
96
+ --color-pzh-gray-600: #5c5c5c;
97
+ --color-pzh-gray-700: #464646;
98
+ --color-pzh-gray-800: #222222;
99
+
100
+ --color-pzh-positive: #00804d;
101
+ --color-pzh-neutral: #7badde;
102
+ --color-pzh-negative: #d11f3d;
103
+ --color-pzh-visited-link: #5f29a2;
104
+ --color-pzh-backdrop: rgba(92, 92, 92, 0.5);
105
+ --color-pzh-focus: #2360c5;
106
+
107
+ --color-pzh-badge-green: #50a658;
108
+ --color-pzh-badge-red: #cb3b36;
109
+ --color-pzh-badge-orange: #f9b53c;
110
+
111
+ --color-pzh-ui-white: #ffffff;
112
+ --color-pzh-ui-light-blue: #e5eff8;
113
+
114
+ /* Shadows */
115
+ --shadow-card:
116
+ 0px 18px 60px rgba(0, 0, 0, 0.07),
117
+ 0px 4.02054px 13.4018px rgba(0, 0, 0, 0.0417275),
118
+ 0px 1.19702px 3.99006px rgba(0, 0, 0, 0.0282725);
119
+
120
+ /* Animations */
121
+ --animate-accordion-down: accordion-down 0.2s ease-out;
122
+ --animate-accordion-up: accordion-up 0.2s ease-out;
123
+
124
+ @keyframes accordion-down {
125
+ 0% {
126
+ height: 0;
127
+ }
128
+ 100% {
129
+ height: var(--radix-accordion-content-height);
130
+ }
131
+ }
132
+
133
+ @keyframes accordion-up {
134
+ 0% {
135
+ height: var(--radix-accordion-content-height);
136
+ }
137
+ 100% {
138
+ height: 0;
139
+ }
140
+ }
141
+ }
4
142
 
5
143
  @font-face {
6
- font-family: "Karbon Regular";
7
- src: url("./../fonts/Karbon-Regular.woff2") format("woff2");
8
- font-weight: normal;
9
- font-display: swap;
10
- ascent-override: 90%;
144
+ font-family: 'Karbon Regular';
145
+ src: url('./../fonts/Karbon-Regular.woff2') format('woff2');
146
+ font-weight: normal;
147
+ font-display: swap;
148
+ ascent-override: 90%;
11
149
  }
12
150
 
13
151
  @font-face {
14
- font-family: "Karbon Medium";
15
- src: url("./../fonts/Karbon-Medium.woff2") format("woff2");
16
- font-weight: bold;
17
- font-display: swap;
18
- ascent-override: 90%;
152
+ font-family: 'Karbon Medium';
153
+ src: url('./../fonts/Karbon-Medium.woff2') format('woff2');
154
+ font-weight: bold;
155
+ font-display: swap;
156
+ ascent-override: 90%;
19
157
  }
20
158
 
21
159
  html {
22
- height: 100%;
23
- overflow: auto;
160
+ height: 100%;
161
+ overflow: auto;
24
162
  }
25
163
 
26
164
  body {
27
- margin: 0;
28
- padding: 0;
29
- font-size: 20px;
30
- line-height: 1.5em;
31
- font-family: "Karbon Regular", sans-serif;
32
- font-weight: 400;
33
- -webkit-font-smoothing: antialiased;
34
- -moz-osx-font-smoothing: grayscale;
165
+ margin: 0;
166
+ padding: 0;
167
+ font-size: 20px;
168
+ line-height: 1.5em;
169
+ font-family: 'Karbon Regular', sans-serif;
170
+ font-weight: 400;
171
+ -webkit-font-smoothing: antialiased;
172
+ -moz-osx-font-smoothing: grayscale;
35
173
  }
36
174
 
37
175
  h1,
@@ -43,268 +181,268 @@ h6,
43
181
  .font-bold,
44
182
  strong,
45
183
  b {
46
- font-family: "Karbon Medium", sans-serif;
184
+ font-family: 'Karbon Medium', sans-serif;
47
185
  }
48
186
 
49
187
  ul li ul li {
50
- list-style-type: circle;
188
+ list-style-type: circle;
51
189
  }
52
190
 
53
191
  ul li ul li ul li {
54
- list-style-type: square;
192
+ list-style-type: square;
55
193
  }
56
194
 
57
195
  ol li ol li {
58
- list-style-type: lower-alpha;
196
+ list-style-type: lower-alpha;
59
197
  }
60
198
 
61
199
  ol li ol li ol li {
62
- list-style-type: lower-roman;
200
+ list-style-type: lower-roman;
63
201
  }
64
202
 
65
203
  .font-normal {
66
- font-family: "Karbon Regular", sans-serif;
204
+ font-family: 'Karbon Regular', sans-serif;
67
205
  }
68
206
 
69
207
  .bold {
70
- font-weight: 700;
208
+ font-weight: 700;
71
209
  }
72
210
 
73
211
  @layer utilities {
74
- .pzh-transition-colors {
75
- @apply transition-colors duration-200 ease-in;
76
- }
212
+ .pzh-transition-colors {
213
+ @apply transition-colors duration-200 ease-in;
214
+ }
77
215
  }
78
216
 
79
217
  @layer components {
80
- /*
81
- * Form elements
82
- */
83
-
84
- .pzh-button {
85
- @apply focus:ring-pzh-focus disabled:bg-pzh-gray-200 disabled:text-pzh-blue-dark disabled:text-opacity-35 inline-flex items-center rounded leading-none ring-offset-2 transition duration-200 ease-in focus:outline-none focus:ring disabled:cursor-not-allowed;
86
- }
87
-
88
- .pzh-form-input {
89
- @apply placeholder-pzh-gray-600 text-pzh-blue-dark border-pzh-gray-600 hover:border-pzh-blue focus:ring-pzh-focus focus:border-pzh-focus disabled:bg-pzh-gray-200 text-m block w-full appearance-none rounded border pb-[6px] pt-[10px] leading-[30px] focus:outline-none focus:outline-none focus:ring focus:ring-2;
90
- }
91
-
92
- .pzh-form-error,
93
- .pzh-form-checkbox.pzh-form-error + span:before,
94
- .pzh-form-radio:checked.pzh-form-error + span:before,
95
- .pzh-form-radio:not(:checked).pzh-form-error + span:before {
96
- @apply border-pzh-red;
97
- }
98
-
99
- .pzh-form-radio:checked + span:before,
100
- .pzh-form-radio:not(:checked) + span:before {
101
- @apply border-pzh-gray-600 absolute left-0 top-1 h-5 w-5 rounded-full border;
102
- content: "";
103
- }
104
- .pzh-form-radio:not(:checked):not(:disabled):hover + span:before,
105
- .pzh-form-checkbox:not(:checked):not(:disabled):hover + span:before {
106
- @apply border-pzh-green-500 bg-pzh-green-10;
107
- }
108
- .pzh-form-radio:checked + span:after,
109
- .pzh-form-radio:not(:checked) + span:after {
110
- @apply bg-pzh-white absolute left-1.5 top-2.5 h-2 w-2 rounded-full transition duration-200;
111
- content: "";
112
- }
113
- .pzh-form-radio:checked + span:before {
114
- @apply bg-pzh-green-500 border-pzh-green-500;
115
- }
116
- .pzh-form-radio:not(:checked) + span:after,
117
- .pzh-form-checkbox:not(:checked) + span:after {
118
- opacity: 0;
119
- transform: scale(0);
120
- }
121
- .pzh-form-radio:checked + span:after,
122
- .pzh-form-checkbox:checked + span:after {
123
- opacity: 1;
124
- transform: scale(1);
125
- }
126
- .pzh-form-radio:not(:checked):disabled + span:before,
127
- .pzh-form-checkbox:disabled + span:before {
128
- @apply border-pzh-gray-500 bg-pzh-gray-200;
129
- }
130
-
131
- .pzh-form-checkbox + span:before {
132
- @apply border-pzh-gray-600 absolute left-0 top-1 h-5 w-5 rounded border transition duration-200;
133
- content: "";
134
- }
135
-
136
- .pzh-form-checkbox:checked:not(:disabled) + span:before {
137
- @apply bg-pzh-green-500 border-pzh-green-500;
138
- }
139
-
140
- .pzh-form-checkbox:checked + span:after,
141
- .pzh-form-checkbox:not(:checked) + span:after {
142
- @apply absolute left-1 top-0.5 h-3 w-3 text-white transition duration-200;
143
- content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='white' d='M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z'/></svg>");
144
- }
145
-
146
- .pzh-form-checkbox:checked:disabled + span:after {
147
- content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='rgba(22, 17, 59, 0.35)' d='M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z'/></svg>");
148
- }
149
-
150
- .pzh-form-radio:focus + span:before,
151
- .pzh-form-checkbox:focus + span:before {
152
- @apply ring-pzh-focus border-pzh-focus outline-none ring ring-2;
153
- }
154
-
155
- .form-field-label {
156
- @apply text-s mb-2 block uppercase tracking-wide text-gray-700;
157
- }
158
-
159
- .form-field-description {
160
- @apply text-s mb-2 text-gray-700;
161
- }
162
-
163
- /*
164
- * React Datepicker
165
- */
166
-
167
- .pzh-datepicker .react-datepicker {
168
- font-family: "Karbon Regular", sans-serif;
218
+ /* Form elements*/
219
+
220
+ .pzh-button {
221
+ @apply focus:ring-pzh-focus disabled:bg-pzh-gray-200 disabled:text-pzh-blue-900/35 inline-flex items-center rounded leading-none ring-offset-2 transition duration-200 ease-in focus:ring-2 focus:outline-none disabled:cursor-not-allowed;
222
+ }
223
+
224
+ .pzh-form-input {
225
+ @apply placeholder-pzh-gray-600 text-pzh-blue-900 border-pzh-gray-600 hover:border-pzh-blue-500 focus:ring-pzh-focus focus:border-pzh-focus disabled:bg-pzh-gray-200 text-m block w-full appearance-none rounded border px-4 py-2 leading-[30px] focus:ring-2 focus:outline-none;
226
+ }
227
+
228
+ .pzh-form-error,
229
+ .pzh-form-checkbox.pzh-form-error + span:before,
230
+ .pzh-form-radio:checked.pzh-form-error + span:before,
231
+ .pzh-form-radio:not(:checked).pzh-form-error + span:before {
232
+ @apply border-pzh-red-500;
233
+ }
234
+
235
+ .pzh-form-radio:checked + span:before,
236
+ .pzh-form-radio:not(:checked) + span:before {
237
+ @apply border-pzh-gray-600 absolute top-1 left-0 h-5 w-5 rounded-full border;
238
+ content: '';
239
+ }
240
+ .pzh-form-radio:not(:checked):not(:disabled):hover + span:before,
241
+ .pzh-form-checkbox:not(:checked):not(:disabled):hover + span:before {
242
+ @apply border-pzh-green-500 bg-pzh-green-10;
243
+ }
244
+ .pzh-form-radio:checked + span:after,
245
+ .pzh-form-radio:not(:checked) + span:after {
246
+ @apply bg-pzh-white absolute top-2.5 left-1.5 h-2 w-2 rounded-full transition duration-200;
247
+ content: '';
248
+ }
249
+ .pzh-form-radio:checked + span:before {
250
+ @apply bg-pzh-green-500 border-pzh-green-500;
251
+ }
252
+ .pzh-form-radio:not(:checked) + span:after,
253
+ .pzh-form-checkbox:not(:checked) + span:after {
254
+ opacity: 0;
255
+ transform: scale(0);
256
+ }
257
+ .pzh-form-radio:checked + span:after,
258
+ .pzh-form-checkbox:checked + span:after {
259
+ opacity: 1;
260
+ transform: scale(1);
261
+ }
262
+ .pzh-form-radio:not(:checked):disabled + span:before,
263
+ .pzh-form-checkbox:disabled + span:before {
264
+ @apply border-pzh-gray-500 bg-pzh-gray-200;
265
+ }
266
+
267
+ .pzh-form-checkbox + span:before {
268
+ @apply border-pzh-gray-600 absolute top-1 left-0 h-5 w-5 rounded border transition duration-200;
269
+ content: '';
270
+ }
271
+
272
+ .pzh-form-checkbox:checked:not(:disabled) + span:before {
273
+ @apply bg-pzh-green-500 border-pzh-green-500;
274
+ }
275
+
276
+ .pzh-form-checkbox:checked + span:after,
277
+ .pzh-form-checkbox:not(:checked) + span:after {
278
+ @apply text-pzh-white absolute left-1 h-3 w-3 transition duration-200;
279
+ content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='white' d='M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z'/></svg>");
280
+ }
281
+
282
+ .pzh-form-checkbox:checked:disabled + span:after {
283
+ content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='rgba(22, 17, 59, 0.35)' d='M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z'/></svg>");
284
+ }
285
+
286
+ .pzh-form-radio:focus + span:before,
287
+ .pzh-form-checkbox:focus + span:before {
288
+ @apply ring-pzh-focus border-pzh-focus ring-2 outline-none;
289
+ }
290
+
291
+ .form-field-label {
292
+ @apply text-s text-pzh-gray-700 mb-2 block tracking-wide uppercase;
293
+ }
294
+
295
+ .form-field-description {
296
+ @apply text-s text-pzh-gray-700 mb-2;
297
+ }
298
+
299
+ .pzh-select-input input {
300
+ box-shadow: none !important;
301
+ }
302
+
303
+ .pzh-modal {
304
+ &[data-entering] {
305
+ animation: fade 150ms;
306
+ }
307
+
308
+ &[data-exiting] {
309
+ animation: fade 150ms reverse ease-in;
310
+ }
311
+ }
312
+
313
+ @keyframes fade {
314
+ from {
315
+ opacity: 0;
316
+ }
317
+
318
+ to {
319
+ opacity: 1;
320
+ }
321
+ }
322
+ }
323
+
324
+ @utility prose {
325
+ p.is-editor-empty:first-child::before {
326
+ @apply text-pzh-blue-900/55;
327
+ content: attr(data-placeholder);
328
+ float: left;
329
+ pointer-events: none;
330
+ height: 0;
331
+ }
332
+
333
+ li {
334
+ p,
335
+ & > ol,
336
+ & > ul {
337
+ margin: 0;
338
+ }
339
+ }
340
+
341
+ table {
342
+ @apply text-m border-pzh-gray-600 border;
343
+
344
+ p {
345
+ margin: 0;
346
+ }
347
+
348
+ td,
349
+ th {
350
+ @apply border-pzh-gray-600 border p-2;
351
+ }
352
+
353
+ tr {
354
+ @apply border-pzh-gray-600 border-b;
355
+
356
+ th {
357
+ @apply bg-pzh-gray-100 font-bold;
358
+ }
359
+ }
360
+ }
361
+ }
362
+
363
+ /* React Datepicker */
364
+ .pzh-datepicker .react-datepicker {
365
+ font-family: 'Karbon Regular', sans-serif;
169
366
  font-weight: 400;
170
367
  font-size: 0.8rem;
171
- box-shadow: 0px 18px 60px rgba(0, 0, 0, 0.07),
172
- 0px 4.02054px 13.4018px rgba(0, 0, 0, 0.0417275),
173
- 0px 1.19702px 3.99006px rgba(0, 0, 0, 0.0282725);
174
- @apply text-pzh-blue-dark border-none;
175
- }
368
+ box-shadow:
369
+ 0px 18px 60px rgba(0, 0, 0, 0.07),
370
+ 0px 4.02054px 13.4018px rgba(0, 0, 0, 0.0417275),
371
+ 0px 1.19702px 3.99006px rgba(0, 0, 0, 0.0282725);
372
+ @apply text-pzh-blue-900 border-none;
373
+ }
176
374
 
177
- .pzh-datepicker .react-datepicker__triangle {
375
+ .pzh-datepicker .react-datepicker__triangle {
178
376
  display: none;
179
- }
377
+ }
180
378
 
181
- .pzh-datepicker .react-datepicker__header {
182
- @apply border-none bg-white;
183
- }
379
+ .pzh-datepicker .react-datepicker__header {
380
+ @apply bg-pzh-white border-none;
381
+ }
184
382
 
185
- .pzh-datepicker .react-datepicker__month {
383
+ .pzh-datepicker .react-datepicker__month {
186
384
  @apply mx-0.5 mt-0;
187
- }
385
+ }
188
386
 
189
- .pzh-datepicker .react-datepicker__day-names {
190
- @apply bg-pzh-blue-dark bg-opacity-10;
191
- }
387
+ .pzh-datepicker .react-datepicker__day-names {
388
+ @apply bg-pzh-blue-900/10;
389
+ }
192
390
 
193
- .pzh-datepicker .react-datepicker__day-name {
194
- @apply bold my-0 leading-[26px];
195
- }
391
+ .pzh-datepicker .react-datepicker__day-name {
392
+ @apply my-0 leading-[26px] font-bold;
393
+ }
196
394
 
197
- .pzh-datepicker .react-datepicker__current-month {
395
+ .pzh-datepicker .react-datepicker__current-month {
198
396
  @apply mb-2;
199
- }
397
+ }
200
398
 
201
- .pzh-datepicker
399
+ .pzh-datepicker
202
400
  .react-datepicker__day--outside-month:not(
203
- .react-datepicker__day--selected
401
+ .react-datepicker__day--selected
204
402
  ) {
205
- @apply text-pzh-blue-dark text-opacity-35;
206
- }
403
+ @apply text-pzh-blue-900/35;
404
+ }
207
405
 
208
- .pzh-datepicker .react-datepicker__day-name,
209
- .pzh-datepicker .react-datepicker__day,
210
- .pzh-datepicker .react-datepicker__time-name {
406
+ .pzh-datepicker .react-datepicker__day-name,
407
+ .pzh-datepicker .react-datepicker__day,
408
+ .pzh-datepicker .react-datepicker__time-name {
211
409
  @apply mx-2 my-1 h-[26px] w-[26px] leading-7;
212
- }
410
+ }
213
411
 
214
- .pzh-datepicker .react-datepicker__day {
412
+ .pzh-datepicker .react-datepicker__day {
215
413
  @apply rounded-full hover:rounded-full;
216
- }
414
+ }
217
415
 
218
- .pzh-datepicker
416
+ .pzh-datepicker
219
417
  .react-datepicker__day--today:not(.react-datepicker__day--selected),
220
- .pzh-datepicker
418
+ .pzh-datepicker
221
419
  .react-datepicker__day--today:hover:not(.react-datepicker__day--selected),
222
- .pzh-datepicker .react-datepicker__day--keyboard-selected {
223
- @apply bg-pzh-blue-dark text-pzh-blue-dark bg-opacity-10;
224
- }
225
-
226
- .pzh-datepicker .react-datepicker__day--keyboard-selected:hover {
227
- @apply bg-pzh-blue-dark bg-opacity-10;
228
- }
229
-
230
- .pzh-datepicker .react-datepicker__day--selected,
231
- .pzh-datepicker .react-datepicker__day--selected:hover {
232
- @apply bg-pzh-green font-bold;
233
- }
234
-
235
- .pzh-datepicker .react-datepicker__year-read-view--down-arrow,
236
- .pzh-datepicker .react-datepicker__month-read-view--down-arrow,
237
- .pzh-datepicker .react-datepicker__month-year-read-view--down-arrow,
238
- .pzh-datepicker .react-datepicker__navigation-icon::before {
239
- @apply h-[7px] w-[7px] border border-0 border-r-[1px] border-t-[1px] border-black;
240
- }
241
-
242
- .pzh-datepicker .react-datepicker__navigation-icon {
243
- @apply leading-[14px];
244
- }
420
+ .pzh-datepicker .react-datepicker__day--keyboard-selected {
421
+ @apply bg-pzh-blue-900/10 text-pzh-blue-900;
422
+ }
245
423
 
246
- .pzh-datepicker .react-datepicker__current-month,
247
- .pzh-datepicker .react-datepicker__day-name,
248
- .pzh-datepicker .react-datepicker__day--today {
249
- @apply font-bold;
250
- }
251
-
252
- .pzh-select-input input {
253
- box-shadow: none !important;
254
- }
255
-
256
- .ProseMirror p.is-editor-empty:first-child::before {
257
- @apply text-pzh-blue-dark/55;
258
- content: attr(data-placeholder);
259
- float: left;
260
- pointer-events: none;
261
- height: 0;
262
- }
263
-
264
- .pzh-modal {
265
- &[data-entering] {
266
- animation: fade 150ms;
267
- }
424
+ .pzh-datepicker .react-datepicker__day--keyboard-selected:hover {
425
+ @apply bg-pzh-blue-900/10;
426
+ }
268
427
 
269
- &[data-exiting] {
270
- animation: fade 150ms reverse ease-in;
271
- }
272
- }
428
+ .pzh-datepicker .react-datepicker__day--selected,
429
+ .pzh-datepicker .react-datepicker__day--selected:hover {
430
+ @apply bg-pzh-green-500 font-bold;
431
+ }
273
432
 
274
- @keyframes fade {
275
- from {
276
- opacity: 0;
277
- }
433
+ .pzh-datepicker .react-datepicker__year-read-view--down-arrow,
434
+ .pzh-datepicker .react-datepicker__month-read-view--down-arrow,
435
+ .pzh-datepicker .react-datepicker__month-year-read-view--down-arrow,
436
+ .pzh-datepicker .react-datepicker__navigation-icon::before {
437
+ @apply border-pzh-black h-[7px] w-[7px] border-0 border-t-[1px] border-r-[1px];
438
+ }
278
439
 
279
- to {
280
- opacity: 1;
281
- }
282
- }
283
-
284
- .prose table {
285
- @apply !text-m;
286
- }
287
-
288
- .prose table,
289
- .prose table td,
290
- .prose table th {
291
- @apply border border-pzh-gray-600;
292
- }
293
-
294
- .prose table tr th {
295
- @apply bg-pzh-gray-100 font-bold;
296
- }
297
-
298
- .prose table tr {
299
- @apply border-b border-pzh-gray-600;
300
- }
301
-
302
- .prose table td,
303
- .prose table th {
304
- @apply !p-2;
305
- }
306
-
307
- .prose table p {
308
- @apply !my-0;
309
- }
440
+ .pzh-datepicker .react-datepicker__navigation-icon {
441
+ @apply leading-[14px];
442
+ }
443
+
444
+ .pzh-datepicker .react-datepicker__current-month,
445
+ .pzh-datepicker .react-datepicker__day-name,
446
+ .pzh-datepicker .react-datepicker__day--today {
447
+ @apply font-bold;
310
448
  }