@pzh-ui/css 0.0.104 → 0.0.106

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 +599 -3427
  6. package/src/tailwind.src.css +373 -237
  7. package/config/index.js +0 -216
package/src/tailwind.src.css CHANGED
@@ -1,37 +1,174 @@
1
- @import "tailwindcss/base";
2
- @import "tailwindcss/components";
3
- @import "tailwindcss/utilities";
1
+ @import 'tailwindcss';
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: 0px 18px 60px rgba(0, 0, 0, 0.07),
116
+ 0px 4.02054px 13.4018px rgba(0, 0, 0, 0.0417275),
117
+ 0px 1.19702px 3.99006px rgba(0, 0, 0, 0.0282725);
118
+
119
+ /* Animations */
120
+ --animate-accordion-down: accordion-down 0.2s ease-out;
121
+ --animate-accordion-up: accordion-up 0.2s ease-out;
122
+
123
+ @keyframes accordion-down {
124
+ 0% {
125
+ height: 0;
126
+ }
127
+ 100% {
128
+ height: var(--radix-accordion-content-height);
129
+ }
130
+ }
131
+
132
+ @keyframes accordion-up {
133
+ 0% {
134
+ height: var(--radix-accordion-content-height);
135
+ }
136
+ 100% {
137
+ height: 0;
138
+ }
139
+ }
140
+ }
4
141
 
5
142
  @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%;
143
+ font-family: 'Karbon Regular';
144
+ src: url('./../fonts/Karbon-Regular.woff2') format('woff2');
145
+ font-weight: normal;
146
+ font-display: swap;
147
+ ascent-override: 90%;
11
148
  }
12
149
 
13
150
  @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%;
151
+ font-family: 'Karbon Medium';
152
+ src: url('./../fonts/Karbon-Medium.woff2') format('woff2');
153
+ font-weight: bold;
154
+ font-display: swap;
155
+ ascent-override: 90%;
19
156
  }
20
157
 
21
158
  html {
22
- height: 100%;
23
- overflow: auto;
159
+ height: 100%;
160
+ overflow: auto;
24
161
  }
25
162
 
26
163
  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;
164
+ margin: 0;
165
+ padding: 0;
166
+ font-size: 20px;
167
+ line-height: 1.5em;
168
+ font-family: 'Karbon Regular', sans-serif;
169
+ font-weight: 400;
170
+ -webkit-font-smoothing: antialiased;
171
+ -moz-osx-font-smoothing: grayscale;
35
172
  }
36
173
 
37
174
  h1,
@@ -43,268 +180,267 @@ h6,
43
180
  .font-bold,
44
181
  strong,
45
182
  b {
46
- font-family: "Karbon Medium", sans-serif;
183
+ font-family: 'Karbon Medium', sans-serif;
47
184
  }
48
185
 
49
186
  ul li ul li {
50
- list-style-type: circle;
187
+ list-style-type: circle;
51
188
  }
52
189
 
53
190
  ul li ul li ul li {
54
- list-style-type: square;
191
+ list-style-type: square;
55
192
  }
56
193
 
57
194
  ol li ol li {
58
- list-style-type: lower-alpha;
195
+ list-style-type: lower-alpha;
59
196
  }
60
197
 
61
198
  ol li ol li ol li {
62
- list-style-type: lower-roman;
199
+ list-style-type: lower-roman;
63
200
  }
64
201
 
65
202
  .font-normal {
66
- font-family: "Karbon Regular", sans-serif;
203
+ font-family: 'Karbon Regular', sans-serif;
67
204
  }
68
205
 
69
206
  .bold {
70
- font-weight: 700;
207
+ font-weight: 700;
71
208
  }
72
209
 
73
210
  @layer utilities {
74
- .pzh-transition-colors {
75
- @apply transition-colors duration-200 ease-in;
76
- }
211
+ .pzh-transition-colors {
212
+ @apply transition-colors duration-200 ease-in;
213
+ }
77
214
  }
78
215
 
79
216
  @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;
217
+ /* Form elements*/
218
+
219
+ .pzh-button {
220
+ @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:outline-none focus:ring-2 disabled:cursor-not-allowed;
221
+ }
222
+
223
+ .pzh-form-input {
224
+ @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:outline-none focus:ring-2;
225
+ }
226
+
227
+ .pzh-form-error,
228
+ .pzh-form-checkbox.pzh-form-error + span:before,
229
+ .pzh-form-radio:checked.pzh-form-error + span:before,
230
+ .pzh-form-radio:not(:checked).pzh-form-error + span:before {
231
+ @apply border-pzh-red-500;
232
+ }
233
+
234
+ .pzh-form-radio:checked + span:before,
235
+ .pzh-form-radio:not(:checked) + span:before {
236
+ @apply border-pzh-gray-600 absolute left-0 top-1 h-5 w-5 rounded-full border;
237
+ content: '';
238
+ }
239
+ .pzh-form-radio:not(:checked):not(:disabled):hover + span:before,
240
+ .pzh-form-checkbox:not(:checked):not(:disabled):hover + span:before {
241
+ @apply border-pzh-green-500 bg-pzh-green-10;
242
+ }
243
+ .pzh-form-radio:checked + span:after,
244
+ .pzh-form-radio:not(:checked) + span:after {
245
+ @apply bg-pzh-white absolute left-1.5 top-2.5 h-2 w-2 rounded-full transition duration-200;
246
+ content: '';
247
+ }
248
+ .pzh-form-radio:checked + span:before {
249
+ @apply bg-pzh-green-500 border-pzh-green-500;
250
+ }
251
+ .pzh-form-radio:not(:checked) + span:after,
252
+ .pzh-form-checkbox:not(:checked) + span:after {
253
+ opacity: 0;
254
+ transform: scale(0);
255
+ }
256
+ .pzh-form-radio:checked + span:after,
257
+ .pzh-form-checkbox:checked + span:after {
258
+ opacity: 1;
259
+ transform: scale(1);
260
+ }
261
+ .pzh-form-radio:not(:checked):disabled + span:before,
262
+ .pzh-form-checkbox:disabled + span:before {
263
+ @apply border-pzh-gray-500 bg-pzh-gray-200;
264
+ }
265
+
266
+ .pzh-form-checkbox + span:before {
267
+ @apply border-pzh-gray-600 absolute left-0 top-1 h-5 w-5 rounded border transition duration-200;
268
+ content: '';
269
+ }
270
+
271
+ .pzh-form-checkbox:checked:not(:disabled) + span:before {
272
+ @apply bg-pzh-green-500 border-pzh-green-500;
273
+ }
274
+
275
+ .pzh-form-checkbox:checked + span:after,
276
+ .pzh-form-checkbox:not(:checked) + span:after {
277
+ @apply text-pzh-white absolute left-1 h-3 w-3 transition duration-200;
278
+ 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>");
279
+ }
280
+
281
+ .pzh-form-checkbox:checked:disabled + span:after {
282
+ 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>");
283
+ }
284
+
285
+ .pzh-form-radio:focus + span:before,
286
+ .pzh-form-checkbox:focus + span:before {
287
+ @apply ring-pzh-focus border-pzh-focus outline-none ring-2;
288
+ }
289
+
290
+ .form-field-label {
291
+ @apply text-s text-pzh-gray-700 mb-2 block uppercase tracking-wide;
292
+ }
293
+
294
+ .form-field-description {
295
+ @apply text-s text-pzh-gray-700 mb-2;
296
+ }
297
+
298
+ .pzh-select-input input {
299
+ box-shadow: none !important;
300
+ }
301
+
302
+ .pzh-modal {
303
+ &[data-entering] {
304
+ animation: fade 150ms;
305
+ }
306
+
307
+ &[data-exiting] {
308
+ animation: fade 150ms reverse ease-in;
309
+ }
310
+ }
311
+
312
+ @keyframes fade {
313
+ from {
314
+ opacity: 0;
315
+ }
316
+
317
+ to {
318
+ opacity: 1;
319
+ }
320
+ }
321
+ }
322
+
323
+ @utility prose {
324
+ p.is-editor-empty:first-child::before {
325
+ @apply text-pzh-blue-900/55;
326
+ content: attr(data-placeholder);
327
+ float: left;
328
+ pointer-events: none;
329
+ height: 0;
330
+ }
331
+
332
+ li {
333
+ p,
334
+ & > ol,
335
+ & > ul {
336
+ margin: 0;
337
+ }
338
+ }
339
+
340
+ table {
341
+ @apply text-m border-pzh-gray-600 border;
342
+
343
+ p {
344
+ margin: 0;
345
+ }
346
+
347
+ td,
348
+ th {
349
+ @apply border-pzh-gray-600 border p-2;
350
+ }
351
+
352
+ tr {
353
+ @apply border-pzh-gray-600 border-b;
354
+
355
+ th {
356
+ @apply bg-pzh-gray-100 font-bold;
357
+ }
358
+ }
359
+ }
360
+ }
361
+
362
+ /* React Datepicker */
363
+ .pzh-datepicker .react-datepicker {
364
+ font-family: 'Karbon Regular', sans-serif;
169
365
  font-weight: 400;
170
366
  font-size: 0.8rem;
171
367
  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
+ 0px 4.02054px 13.4018px rgba(0, 0, 0, 0.0417275),
369
+ 0px 1.19702px 3.99006px rgba(0, 0, 0, 0.0282725);
370
+ @apply text-pzh-blue-900 border-none;
371
+ }
176
372
 
177
- .pzh-datepicker .react-datepicker__triangle {
373
+ .pzh-datepicker .react-datepicker__triangle {
178
374
  display: none;
179
- }
375
+ }
180
376
 
181
- .pzh-datepicker .react-datepicker__header {
182
- @apply border-none bg-white;
183
- }
377
+ .pzh-datepicker .react-datepicker__header {
378
+ @apply bg-pzh-white border-none;
379
+ }
184
380
 
185
- .pzh-datepicker .react-datepicker__month {
381
+ .pzh-datepicker .react-datepicker__month {
186
382
  @apply mx-0.5 mt-0;
187
- }
383
+ }
188
384
 
189
- .pzh-datepicker .react-datepicker__day-names {
190
- @apply bg-pzh-blue-dark bg-opacity-10;
191
- }
385
+ .pzh-datepicker .react-datepicker__day-names {
386
+ @apply bg-pzh-blue-900/10;
387
+ }
192
388
 
193
- .pzh-datepicker .react-datepicker__day-name {
194
- @apply bold my-0 leading-[26px];
195
- }
389
+ .pzh-datepicker .react-datepicker__day-name {
390
+ @apply my-0 font-bold leading-[26px];
391
+ }
196
392
 
197
- .pzh-datepicker .react-datepicker__current-month {
393
+ .pzh-datepicker .react-datepicker__current-month {
198
394
  @apply mb-2;
199
- }
395
+ }
200
396
 
201
- .pzh-datepicker
397
+ .pzh-datepicker
202
398
  .react-datepicker__day--outside-month:not(
203
- .react-datepicker__day--selected
399
+ .react-datepicker__day--selected
204
400
  ) {
205
- @apply text-pzh-blue-dark text-opacity-35;
206
- }
401
+ @apply text-pzh-blue-900/35;
402
+ }
207
403
 
208
- .pzh-datepicker .react-datepicker__day-name,
209
- .pzh-datepicker .react-datepicker__day,
210
- .pzh-datepicker .react-datepicker__time-name {
404
+ .pzh-datepicker .react-datepicker__day-name,
405
+ .pzh-datepicker .react-datepicker__day,
406
+ .pzh-datepicker .react-datepicker__time-name {
211
407
  @apply mx-2 my-1 h-[26px] w-[26px] leading-7;
212
- }
408
+ }
213
409
 
214
- .pzh-datepicker .react-datepicker__day {
410
+ .pzh-datepicker .react-datepicker__day {
215
411
  @apply rounded-full hover:rounded-full;
216
- }
412
+ }
217
413
 
218
- .pzh-datepicker
414
+ .pzh-datepicker
219
415
  .react-datepicker__day--today:not(.react-datepicker__day--selected),
220
- .pzh-datepicker
416
+ .pzh-datepicker
221
417
  .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
- }
418
+ .pzh-datepicker .react-datepicker__day--keyboard-selected {
419
+ @apply bg-pzh-blue-900/10 text-pzh-blue-900;
420
+ }
245
421
 
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
- }
422
+ .pzh-datepicker .react-datepicker__day--keyboard-selected:hover {
423
+ @apply bg-pzh-blue-900/10;
424
+ }
268
425
 
269
- &[data-exiting] {
270
- animation: fade 150ms reverse ease-in;
271
- }
272
- }
426
+ .pzh-datepicker .react-datepicker__day--selected,
427
+ .pzh-datepicker .react-datepicker__day--selected:hover {
428
+ @apply bg-pzh-green-500 font-bold;
429
+ }
273
430
 
274
- @keyframes fade {
275
- from {
276
- opacity: 0;
277
- }
431
+ .pzh-datepicker .react-datepicker__year-read-view--down-arrow,
432
+ .pzh-datepicker .react-datepicker__month-read-view--down-arrow,
433
+ .pzh-datepicker .react-datepicker__month-year-read-view--down-arrow,
434
+ .pzh-datepicker .react-datepicker__navigation-icon::before {
435
+ @apply border-pzh-black h-[7px] w-[7px] border-0 border-r-[1px] border-t-[1px];
436
+ }
278
437
 
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
- }
438
+ .pzh-datepicker .react-datepicker__navigation-icon {
439
+ @apply leading-[14px];
440
+ }
441
+
442
+ .pzh-datepicker .react-datepicker__current-month,
443
+ .pzh-datepicker .react-datepicker__day-name,
444
+ .pzh-datepicker .react-datepicker__day--today {
445
+ @apply font-bold;
310
446
  }