pure-react-ui 1.5.8 → 1.6.0

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.
@@ -1,125 +1,395 @@
1
- /* Kanban Board Container */
1
+ /* Kanban Container */
2
+ .pure-kanban-container {
3
+ min-height: 100vh;
4
+ background-color: #ffffff;
5
+ }
6
+
7
+ /* Header */
8
+ .pure-kanban-header {
9
+ background-color: #0747A6;
10
+ color: #ffffff;
11
+ position: sticky;
12
+ top: 0;
13
+ z-index: 50;
14
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
15
+ }
16
+
17
+ .pure-kanban-header__top {
18
+ display: flex;
19
+ align-items: center;
20
+ justify-content: space-between;
21
+ padding: 0.5rem 1.5rem;
22
+ border-bottom: 1px solid #0052CC;
23
+ }
24
+
25
+ .pure-kanban-header__left {
26
+ display: flex;
27
+ align-items: center;
28
+ gap: 1.5rem;
29
+ }
30
+
31
+ .pure-kanban-header__logo {
32
+ display: flex;
33
+ align-items: center;
34
+ gap: 0.5rem;
35
+ }
36
+
37
+ .pure-kanban-header__logo-icon {
38
+ width: 32px;
39
+ height: 32px;
40
+ background-color: #ffffff;
41
+ border-radius: 4px;
42
+ display: flex;
43
+ align-items: center;
44
+ justify-content: center;
45
+ }
46
+
47
+ .pure-kanban-header__logo-text {
48
+ font-weight: 700;
49
+ font-size: 1.125rem;
50
+ }
51
+
52
+ .pure-kanban-header__nav {
53
+ display: flex;
54
+ align-items: center;
55
+ gap: 0.25rem;
56
+ }
57
+
58
+ .pure-kanban-header__nav-item {
59
+ display: flex;
60
+ align-items: center;
61
+ gap: 0.5rem;
62
+ padding: 0.5rem 0.75rem;
63
+ background: transparent;
64
+ border: none;
65
+ color: #ffffff;
66
+ font-size: 0.875rem;
67
+ cursor: pointer;
68
+ border-radius: 4px;
69
+ transition: background-color 0.2s;
70
+ }
71
+
72
+ .pure-kanban-header__nav-item:hover {
73
+ background-color: #0052CC;
74
+ }
75
+
76
+ .pure-kanban-header__nav-item--active {
77
+ background-color: #0052CC;
78
+ font-weight: 600;
79
+ }
80
+
81
+ .pure-kanban-header__right {
82
+ display: flex;
83
+ align-items: center;
84
+ gap: 0.75rem;
85
+ }
86
+
87
+ .pure-kanban-header__action {
88
+ position: relative;
89
+ padding: 0.5rem;
90
+ background: transparent;
91
+ border: none;
92
+ color: #ffffff;
93
+ cursor: pointer;
94
+ border-radius: 50%;
95
+ transition: background-color 0.2s;
96
+ display: flex;
97
+ align-items: center;
98
+ justify-content: center;
99
+ }
100
+
101
+ .pure-kanban-header__action:hover {
102
+ background-color: #0052CC;
103
+ }
104
+
105
+ .pure-kanban-header__notification-dot {
106
+ position: absolute;
107
+ top: 0.25rem;
108
+ right: 0.25rem;
109
+ width: 8px;
110
+ height: 8px;
111
+ background-color: #FF5630;
112
+ border-radius: 50%;
113
+ }
114
+
115
+ .pure-kanban-header__user {
116
+ width: 32px;
117
+ height: 32px;
118
+ background-color: #0052CC;
119
+ border-radius: 50%;
120
+ display: flex;
121
+ align-items: center;
122
+ justify-content: center;
123
+ font-weight: 600;
124
+ font-size: 0.875rem;
125
+ }
126
+
127
+ .pure-kanban-header__project {
128
+ display: flex;
129
+ align-items: center;
130
+ justify-content: space-between;
131
+ padding: 0.75rem 1.5rem;
132
+ background-color: #0052CC;
133
+ }
134
+
135
+ .pure-kanban-header__project-left {
136
+ display: flex;
137
+ align-items: center;
138
+ gap: 1rem;
139
+ }
140
+
141
+ .pure-kanban-header__project-title {
142
+ margin: 0;
143
+ font-size: 1.25rem;
144
+ font-weight: 700;
145
+ }
146
+
147
+ .pure-kanban-header__project-badge {
148
+ font-size: 0.875rem;
149
+ background-color: #0747A6;
150
+ padding: 0.25rem 0.75rem;
151
+ border-radius: 9999px;
152
+ }
153
+
154
+ .pure-kanban-header__project-right {
155
+ display: flex;
156
+ align-items: center;
157
+ gap: 0.5rem;
158
+ font-size: 0.875rem;
159
+ opacity: 0.9;
160
+ }
161
+
162
+ .pure-kanban-header__separator {
163
+ opacity: 0.6;
164
+ }
165
+
166
+ /* Toolbar */
167
+ .pure-kanban-toolbar {
168
+ display: flex;
169
+ align-items: center;
170
+ justify-content: space-between;
171
+ padding: 0.75rem 1.5rem;
172
+ border-bottom: 1px solid #E5E7EB;
173
+ background-color: #ffffff;
174
+ position: sticky;
175
+ top: 104px;
176
+ z-index: 40;
177
+ gap: 1rem;
178
+ }
179
+
180
+ .pure-kanban-toolbar__left {
181
+ display: flex;
182
+ align-items: center;
183
+ gap: 0.75rem;
184
+ flex: 1;
185
+ }
186
+
187
+ .pure-kanban-toolbar__search {
188
+ position: relative;
189
+ flex: 1;
190
+ max-width: 28rem;
191
+ }
192
+
193
+ .pure-kanban-toolbar__search svg {
194
+ position: absolute;
195
+ left: 0.75rem;
196
+ top: 50%;
197
+ transform: translateY(-50%);
198
+ pointer-events: none;
199
+ }
200
+
201
+ .pure-kanban-toolbar__search-input {
202
+ width: 100%;
203
+ padding: 0.5rem 0.75rem 0.5rem 2.5rem;
204
+ border: 1px solid #D1D5DB;
205
+ border-radius: 6px;
206
+ font-size: 0.875rem;
207
+ outline: none;
208
+ transition: all 0.2s;
209
+ }
210
+
211
+ .pure-kanban-toolbar__search-input:focus {
212
+ border-color: #0052CC;
213
+ box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.1);
214
+ }
215
+
216
+ .pure-kanban-toolbar__filter-btn {
217
+ display: flex;
218
+ align-items: center;
219
+ gap: 0.5rem;
220
+ padding: 0.5rem 1rem;
221
+ border: 1px solid #D1D5DB;
222
+ border-radius: 6px;
223
+ background-color: #ffffff;
224
+ font-size: 0.875rem;
225
+ font-weight: 500;
226
+ cursor: pointer;
227
+ transition: all 0.2s;
228
+ }
229
+
230
+ .pure-kanban-toolbar__filter-btn:hover {
231
+ background-color: #F9FAFB;
232
+ }
233
+
234
+ .pure-kanban-toolbar__select {
235
+ padding: 0.5rem 0.75rem;
236
+ border: 1px solid #D1D5DB;
237
+ border-radius: 6px;
238
+ font-size: 0.875rem;
239
+ background-color: #ffffff;
240
+ cursor: pointer;
241
+ outline: none;
242
+ transition: all 0.2s;
243
+ }
244
+
245
+ .pure-kanban-toolbar__select:focus {
246
+ border-color: #0052CC;
247
+ box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.1);
248
+ }
249
+
250
+ .pure-kanban-toolbar__right {
251
+ display: flex;
252
+ align-items: center;
253
+ gap: 0.5rem;
254
+ }
255
+
256
+ .pure-kanban-toolbar__create-btn {
257
+ display: flex;
258
+ align-items: center;
259
+ gap: 0.5rem;
260
+ padding: 0.5rem 1rem;
261
+ background-color: #0747A6;
262
+ color: #ffffff;
263
+ border: none;
264
+ border-radius: 6px;
265
+ font-size: 0.875rem;
266
+ font-weight: 500;
267
+ cursor: pointer;
268
+ transition: background-color 0.2s;
269
+ }
270
+
271
+ .pure-kanban-toolbar__create-btn:hover {
272
+ background-color: #0052CC;
273
+ }
274
+
275
+ .pure-kanban-toolbar__more-btn {
276
+ padding: 0.5rem;
277
+ border: 1px solid #D1D5DB;
278
+ border-radius: 6px;
279
+ background-color: #ffffff;
280
+ cursor: pointer;
281
+ transition: all 0.2s;
282
+ }
283
+
284
+ .pure-kanban-toolbar__more-btn:hover {
285
+ background-color: #F9FAFB;
286
+ }
287
+
288
+ /* Kanban Board */
2
289
  .pure-kanban {
3
290
  display: flex;
4
291
  gap: 1rem;
5
- padding: 1rem;
292
+ padding: 1.5rem;
6
293
  overflow-x: auto;
7
294
  overflow-y: hidden;
8
- min-height: 600px;
295
+ min-height: calc(100vh - 200px);
9
296
  background-color: #F4F5F7;
10
- position: relative;
11
297
  }
12
298
 
13
299
  /* Kanban Column */
14
300
  .pure-kanban-column {
15
- flex: 0 0 300px;
301
+ flex: 0 0 320px;
16
302
  display: flex;
17
303
  flex-direction: column;
18
- background-color: #F4F5F7;
19
- border-radius: 8px;
20
304
  min-height: 100%;
21
- transition: background-color 0.2s ease;
22
305
  }
23
306
 
24
307
  .pure-kanban-column--drag-over {
25
308
  background-color: #E3FCEF;
309
+ border-radius: 8px;
26
310
  }
27
311
 
28
- /* Column Header */
29
312
  .pure-kanban-column__header {
30
313
  display: flex;
31
314
  align-items: center;
32
315
  justify-content: space-between;
33
- padding: 0.75rem 1rem;
34
- background-color: #FFFFFF;
35
- border-top: 3px solid #0052CC;
36
- border-radius: 8px 8px 0 0;
37
- margin-bottom: 0.5rem;
38
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
316
+ padding: 0.5rem 0.5rem;
317
+ margin-bottom: 0.75rem;
39
318
  }
40
319
 
41
- .pure-kanban-column__title-wrapper {
320
+ .pure-kanban-column__header-left {
42
321
  display: flex;
43
322
  align-items: center;
44
323
  gap: 0.5rem;
45
- flex: 1;
46
324
  }
47
325
 
48
326
  .pure-kanban-column__title {
49
327
  margin: 0;
50
- font-size: 0.875rem;
51
- font-weight: 600;
52
- color: #172B4D;
328
+ font-size: 0.75rem;
329
+ font-weight: 700;
330
+ color: #6B778C;
53
331
  text-transform: uppercase;
54
- letter-spacing: 0.5px;
332
+ letter-spacing: 0.05em;
55
333
  }
56
334
 
57
335
  .pure-kanban-column__count {
58
- display: inline-flex;
59
- align-items: center;
60
- justify-content: center;
61
- min-width: 24px;
62
- height: 24px;
63
- padding: 0 6px;
64
336
  background-color: #DFE1E6;
65
- border-radius: 12px;
66
- font-size: 0.75rem;
67
- font-weight: 600;
68
337
  color: #42526E;
69
- }
70
-
71
- .pure-kanban-column__limit {
72
338
  font-size: 0.75rem;
73
- color: #6B778C;
339
+ font-weight: 600;
340
+ padding: 0.125rem 0.5rem;
341
+ border-radius: 12px;
342
+ min-width: 24px;
343
+ text-align: center;
74
344
  }
75
345
 
76
- .pure-kanban-column__add-button {
77
- display: flex;
78
- align-items: center;
79
- justify-content: center;
80
- width: 24px;
81
- height: 24px;
82
- padding: 0;
346
+ .pure-kanban-column__add-btn {
347
+ padding: 0.25rem;
83
348
  background: transparent;
84
349
  border: none;
85
- border-radius: 4px;
86
350
  color: #6B778C;
87
351
  cursor: pointer;
88
- transition: all 0.2s ease;
352
+ border-radius: 4px;
353
+ transition: all 0.2s;
354
+ display: flex;
355
+ align-items: center;
356
+ justify-content: center;
89
357
  }
90
358
 
91
- .pure-kanban-column__add-button:hover {
92
- background-color: #EBECF0;
93
- color: #172B4D;
359
+ .pure-kanban-column__add-btn:hover {
360
+ background-color: #E5E7EB;
94
361
  }
95
362
 
96
363
  /* Column Body */
97
- .pure-kanban-column__body {
364
+ .pure-kanban-column-body {
98
365
  flex: 1;
99
366
  display: flex;
100
367
  flex-direction: column;
101
368
  gap: 0.5rem;
102
369
  padding: 0.5rem;
370
+ background-color: #F4F5F7;
371
+ border-radius: 8px;
372
+ min-height: 400px;
373
+ max-height: calc(100vh - 300px);
103
374
  overflow-y: auto;
104
375
  overflow-x: hidden;
105
- max-height: calc(100vh - 200px);
106
- min-height: 400px;
376
+ position: relative;
107
377
  }
108
378
 
109
- .pure-kanban-column__body::-webkit-scrollbar {
379
+ .pure-kanban-column-body::-webkit-scrollbar {
110
380
  width: 8px;
111
381
  }
112
382
 
113
- .pure-kanban-column__body::-webkit-scrollbar-track {
383
+ .pure-kanban-column-body::-webkit-scrollbar-track {
114
384
  background: transparent;
115
385
  }
116
386
 
117
- .pure-kanban-column__body::-webkit-scrollbar-thumb {
387
+ .pure-kanban-column-body::-webkit-scrollbar-thumb {
118
388
  background: #DFE1E6;
119
389
  border-radius: 4px;
120
390
  }
121
391
 
122
- .pure-kanban-column__body::-webkit-scrollbar-thumb:hover {
392
+ .pure-kanban-column-body::-webkit-scrollbar-thumb:hover {
123
393
  background: #B3BAC5;
124
394
  }
125
395
 
@@ -140,197 +410,218 @@
140
410
  font-size: 0.875rem;
141
411
  }
142
412
 
143
- .pure-kanban-column__empty-add-button {
413
+ .pure-kanban-column__empty-add-btn {
144
414
  padding: 0.5rem 1rem;
145
- background-color: #FFFFFF;
415
+ background-color: #ffffff;
146
416
  border: 1px dashed #DFE1E6;
147
417
  border-radius: 4px;
148
418
  color: #0052CC;
149
419
  font-size: 0.875rem;
150
420
  font-weight: 500;
151
421
  cursor: pointer;
152
- transition: all 0.2s ease;
422
+ transition: all 0.2s;
153
423
  }
154
424
 
155
- .pure-kanban-column__empty-add-button:hover {
425
+ .pure-kanban-column__empty-add-btn:hover {
156
426
  background-color: #F4F5F7;
157
427
  border-color: #0052CC;
158
428
  }
159
429
 
160
- /* Card Wrapper */
161
- .pure-kanban-card-wrapper {
430
+ /* Task Wrapper */
431
+ .pure-kanban-task-wrapper {
162
432
  position: relative;
163
433
  transition: margin 0.2s ease;
434
+ width: 100%;
164
435
  }
165
436
 
166
- .pure-kanban-card-wrapper--drag-over {
437
+ .pure-kanban-task-wrapper--drag-over {
167
438
  margin-bottom: 60px;
168
439
  }
169
440
 
170
- /* Kanban Card */
171
- .pure-kanban-card {
172
- position: relative;
173
- background-color: #FFFFFF;
174
- border-radius: 4px;
441
+ .pure-kanban-task-wrapper--placeholder {
442
+ height: 1px;
443
+ margin: 0.5rem 0;
444
+ background: transparent;
445
+ }
446
+
447
+ /* Task Card */
448
+ .pure-kanban-task {
449
+ background-color: #ffffff;
450
+ border-radius: 8px;
175
451
  padding: 0.75rem;
176
452
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
177
453
  cursor: grab;
178
454
  transition: all 0.2s ease;
179
- margin-bottom: 0.5rem;
455
+ border: 1px solid #E5E7EB;
456
+ width: 100%;
457
+ max-width: 100%;
458
+ box-sizing: border-box;
180
459
  }
181
460
 
182
- .pure-kanban-card:hover {
461
+ .pure-kanban-task:hover {
183
462
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
463
+ border-color: #0052CC;
184
464
  transform: translateY(-1px);
185
465
  }
186
466
 
187
- .pure-kanban-card:active {
467
+ .pure-kanban-task:active {
188
468
  cursor: grabbing;
189
469
  }
190
470
 
191
- .pure-kanban-card--dragging {
192
- opacity: 0.5;
193
- transform: rotate(5deg);
471
+ .pure-kanban-task--dragging {
472
+ opacity: 0;
473
+ pointer-events: none;
474
+ visibility: hidden;
194
475
  }
195
476
 
196
- /* Priority Indicator */
197
- .pure-kanban-card__priority {
198
- position: absolute;
199
- top: 0;
200
- left: 0;
201
- width: 4px;
202
- height: 100%;
203
- border-radius: 4px 0 0 4px;
477
+ .pure-kanban-task-wrapper--placeholder {
478
+ pointer-events: none;
204
479
  }
205
480
 
206
- /* Card Header */
207
- .pure-kanban-card__header {
481
+ .pure-kanban-task__header {
208
482
  display: flex;
209
483
  align-items: flex-start;
210
484
  justify-content: space-between;
211
- gap: 0.5rem;
212
485
  margin-bottom: 0.5rem;
213
486
  }
214
487
 
215
- .pure-kanban-card__title {
216
- margin: 0;
217
- font-size: 0.875rem;
218
- font-weight: 500;
219
- color: #172B4D;
220
- line-height: 1.4;
221
- flex: 1;
222
- word-break: break-word;
488
+ .pure-kanban-task__type-wrapper {
489
+ display: flex;
490
+ align-items: center;
491
+ gap: 0.5rem;
223
492
  }
224
493
 
225
- .pure-kanban-card__actions {
494
+ .pure-kanban-task__type-icon {
495
+ padding: 0.25rem;
496
+ border-radius: 4px;
226
497
  display: flex;
227
- gap: 0.25rem;
228
- opacity: 0;
229
- transition: opacity 0.2s ease;
498
+ align-items: center;
499
+ justify-content: center;
230
500
  }
231
501
 
232
- .pure-kanban-card:hover .pure-kanban-card__actions {
233
- opacity: 1;
502
+ .pure-kanban-task__id {
503
+ font-size: 0.75rem;
504
+ font-weight: 500;
505
+ color: #6B778C;
234
506
  }
235
507
 
236
- .pure-kanban-card__action {
237
- display: flex;
238
- align-items: center;
239
- justify-content: center;
240
- width: 20px;
241
- height: 20px;
242
- padding: 0;
508
+ .pure-kanban-task__more {
509
+ padding: 0.25rem;
243
510
  background: transparent;
244
511
  border: none;
245
- border-radius: 3px;
246
512
  color: #6B778C;
247
513
  cursor: pointer;
248
- transition: all 0.2s ease;
249
- }
250
-
251
- .pure-kanban-card__action:hover {
252
- background-color: #EBECF0;
253
- color: #172B4D;
514
+ border-radius: 4px;
515
+ opacity: 0;
516
+ transition: all 0.2s;
517
+ display: flex;
518
+ align-items: center;
519
+ justify-content: center;
254
520
  }
255
521
 
256
- /* Card Description */
257
- .pure-kanban-card__description {
258
- margin: 0 0 0.75rem 0;
259
- font-size: 0.8125rem;
260
- color: #6B778C;
261
- line-height: 1.5;
262
- word-break: break-word;
522
+ .pure-kanban-task:hover .pure-kanban-task__more {
523
+ opacity: 1;
524
+ }
525
+
526
+ .pure-kanban-task__more:hover {
527
+ background-color: #F4F5F7;
528
+ }
529
+
530
+ .pure-kanban-task__title {
531
+ margin: 0 0 0.5rem 0;
532
+ font-size: 0.875rem;
533
+ font-weight: 500;
534
+ color: #172B4D;
535
+ line-height: 1.4;
263
536
  display: -webkit-box;
264
- -webkit-line-clamp: 3;
537
+ -webkit-line-clamp: 2;
265
538
  -webkit-box-orient: vertical;
266
539
  overflow: hidden;
267
540
  }
268
541
 
269
- /* Card Footer */
270
- .pure-kanban-card__footer {
271
- display: flex;
272
- align-items: center;
273
- justify-content: space-between;
274
- gap: 0.5rem;
275
- margin-top: 0.5rem;
276
- }
277
-
278
- .pure-kanban-card__tags {
542
+ .pure-kanban-task__labels {
279
543
  display: flex;
280
544
  flex-wrap: wrap;
281
545
  gap: 0.25rem;
282
- flex: 1;
546
+ margin-bottom: 0.75rem;
283
547
  }
284
548
 
285
- .pure-kanban-card__tag {
549
+ .pure-kanban-task__label {
286
550
  display: inline-block;
287
551
  padding: 0.125rem 0.5rem;
288
- background-color: #DFE1E6;
289
- border-radius: 3px;
552
+ background-color: #F4F5F7;
553
+ color: #42526E;
290
554
  font-size: 0.6875rem;
291
555
  font-weight: 500;
292
- color: #42526E;
556
+ border-radius: 3px;
293
557
  white-space: nowrap;
294
558
  }
295
559
 
296
- .pure-kanban-card__tag--more {
297
- background-color: #EBECF0;
560
+ .pure-kanban-task__label-more {
561
+ font-size: 0.75rem;
298
562
  color: #6B778C;
563
+ padding: 0 0.25rem;
564
+ }
565
+
566
+ .pure-kanban-task__footer {
567
+ display: flex;
568
+ align-items: center;
569
+ justify-content: space-between;
570
+ margin-top: 0.75rem;
571
+ padding-top: 0.5rem;
572
+ border-top: 1px solid #F4F5F7;
299
573
  }
300
574
 
301
- /* Card Meta */
302
- .pure-kanban-card__meta {
575
+ .pure-kanban-task__footer-left {
303
576
  display: flex;
304
577
  align-items: center;
305
578
  gap: 0.5rem;
306
579
  }
307
580
 
308
- .pure-kanban-card__assignee {
581
+ .pure-kanban-task__story-points {
582
+ font-size: 0.75rem;
583
+ font-weight: 600;
584
+ color: #42526E;
585
+ background-color: #F4F5F7;
586
+ padding: 0.125rem 0.5rem;
587
+ border-radius: 3px;
588
+ }
589
+
590
+ .pure-kanban-task__footer-right {
309
591
  display: flex;
310
592
  align-items: center;
311
- justify-content: center;
593
+ gap: 0.5rem;
594
+ }
595
+
596
+ .pure-kanban-task__meta-item {
597
+ display: flex;
598
+ align-items: center;
599
+ gap: 0.25rem;
600
+ color: #6B778C;
601
+ font-size: 0.75rem;
602
+ }
603
+
604
+ .pure-kanban-task__assignee {
312
605
  width: 24px;
313
606
  height: 24px;
314
- background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
315
607
  border-radius: 50%;
608
+ background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
609
+ display: flex;
610
+ align-items: center;
611
+ justify-content: center;
316
612
  font-size: 0.75rem;
317
613
  font-weight: 600;
318
- color: #FFFFFF;
614
+ color: #ffffff;
319
615
  cursor: pointer;
320
- transition: transform 0.2s ease;
616
+ transition: transform 0.2s;
321
617
  }
322
618
 
323
- .pure-kanban-card__assignee:hover {
619
+ .pure-kanban-task__assignee:hover {
324
620
  transform: scale(1.1);
325
621
  }
326
622
 
327
- .pure-kanban-card__due-date {
328
- font-size: 0.875rem;
329
- cursor: pointer;
330
- }
331
-
332
623
  /* Drop Indicator */
333
- .pure-kanban-card__drop-indicator {
624
+ .pure-kanban-task__drop-indicator {
334
625
  height: 2px;
335
626
  background-color: #0052CC;
336
627
  border-radius: 2px;
@@ -347,51 +638,344 @@
347
638
  }
348
639
  }
349
640
 
350
- /* Responsive Design */
351
- @media (max-width: 768px) {
352
- .pure-kanban {
353
- padding: 0.5rem;
354
- gap: 0.5rem;
355
- }
641
+ /* Modal */
642
+ .pure-kanban-modal-overlay {
643
+ position: fixed;
644
+ inset: 0;
645
+ background-color: rgba(0, 0, 0, 0.5);
646
+ display: flex;
647
+ align-items: center;
648
+ justify-content: center;
649
+ z-index: 50;
650
+ padding: 1rem;
651
+ }
356
652
 
357
- .pure-kanban-column {
358
- flex: 0 0 280px;
359
- }
653
+ .pure-kanban-modal {
654
+ background-color: #ffffff;
655
+ border-radius: 8px;
656
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
657
+ width: 100%;
658
+ max-width: 80rem;
659
+ max-height: 90vh;
660
+ overflow: hidden;
661
+ display: flex;
662
+ }
360
663
 
361
- .pure-kanban-column__body {
362
- max-height: calc(100vh - 150px);
363
- }
664
+ .pure-kanban-modal__main {
665
+ flex: 1;
666
+ overflow-y: auto;
667
+ }
668
+
669
+ .pure-kanban-modal__content {
670
+ padding: 1.5rem;
671
+ }
672
+
673
+ .pure-kanban-modal__header {
674
+ display: flex;
675
+ align-items: flex-start;
676
+ justify-content: space-between;
677
+ margin-bottom: 1.5rem;
678
+ }
679
+
680
+ .pure-kanban-modal__header-left {
681
+ display: flex;
682
+ align-items: flex-start;
683
+ gap: 0.75rem;
684
+ }
685
+
686
+ .pure-kanban-modal__type-icon {
687
+ padding: 0.5rem;
688
+ border-radius: 4px;
689
+ display: flex;
690
+ align-items: center;
691
+ justify-content: center;
692
+ }
693
+
694
+ .pure-kanban-modal__id {
695
+ display: block;
696
+ font-size: 0.875rem;
697
+ color: #6B778C;
698
+ font-weight: 500;
699
+ margin-bottom: 0.25rem;
700
+ }
701
+
702
+ .pure-kanban-modal__title {
703
+ margin: 0;
704
+ font-size: 1.5rem;
705
+ font-weight: 600;
706
+ color: #172B4D;
707
+ }
708
+
709
+ .pure-kanban-modal__close {
710
+ padding: 0.5rem;
711
+ background: transparent;
712
+ border: none;
713
+ color: #6B778C;
714
+ cursor: pointer;
715
+ border-radius: 4px;
716
+ transition: all 0.2s;
717
+ }
718
+
719
+ .pure-kanban-modal__close:hover {
720
+ background-color: #F4F5F7;
721
+ }
722
+
723
+ .pure-kanban-modal__section {
724
+ margin-bottom: 1.5rem;
725
+ }
726
+
727
+ .pure-kanban-modal__section-title {
728
+ font-size: 0.875rem;
729
+ font-weight: 600;
730
+ color: #42526E;
731
+ margin-bottom: 0.5rem;
732
+ display: flex;
733
+ align-items: center;
734
+ gap: 0.5rem;
735
+ }
736
+
737
+ .pure-kanban-modal__description {
738
+ background-color: #F4F5F7;
739
+ padding: 1rem;
740
+ border-radius: 8px;
741
+ color: #42526E;
742
+ line-height: 1.6;
743
+ }
744
+
745
+ .pure-kanban-modal__labels {
746
+ display: flex;
747
+ flex-wrap: wrap;
748
+ gap: 0.5rem;
749
+ }
750
+
751
+ .pure-kanban-modal__label {
752
+ background-color: #F4F5F7;
753
+ color: #42526E;
754
+ padding: 0.25rem 0.75rem;
755
+ border-radius: 6px;
756
+ font-weight: 500;
757
+ font-size: 0.875rem;
758
+ }
759
+
760
+ .pure-kanban-modal__comment-box {
761
+ border: 1px solid #E5E7EB;
762
+ border-radius: 8px;
763
+ padding: 1rem;
764
+ }
765
+
766
+ .pure-kanban-modal__comment-input {
767
+ width: 100%;
768
+ padding: 0.5rem;
769
+ border: 1px solid #E5E7EB;
770
+ border-radius: 4px;
771
+ font-size: 0.875rem;
772
+ resize: vertical;
773
+ outline: none;
774
+ transition: all 0.2s;
775
+ }
776
+
777
+ .pure-kanban-modal__comment-input:focus {
778
+ border-color: #0052CC;
779
+ box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.1);
780
+ }
781
+
782
+ .pure-kanban-modal__comment-actions {
783
+ display: flex;
784
+ justify-content: flex-end;
785
+ margin-top: 0.5rem;
786
+ }
787
+
788
+ .pure-kanban-modal__comment-btn {
789
+ padding: 0.5rem 1rem;
790
+ background-color: #0747A6;
791
+ color: #ffffff;
792
+ border: none;
793
+ border-radius: 4px;
794
+ font-size: 0.875rem;
795
+ font-weight: 500;
796
+ cursor: pointer;
797
+ transition: background-color 0.2s;
798
+ }
799
+
800
+ .pure-kanban-modal__comment-btn:hover {
801
+ background-color: #0052CC;
802
+ }
803
+
804
+ .pure-kanban-modal__activity {
805
+ display: flex;
806
+ flex-direction: column;
807
+ gap: 0.75rem;
808
+ }
809
+
810
+ .pure-kanban-modal__activity-item {
811
+ display: flex;
812
+ gap: 0.75rem;
813
+ }
814
+
815
+ .pure-kanban-modal__activity-avatar {
816
+ width: 32px;
817
+ height: 32px;
818
+ border-radius: 50%;
819
+ background-color: #D1D5DB;
820
+ flex-shrink: 0;
821
+ }
822
+
823
+ .pure-kanban-modal__activity-content {
824
+ flex: 1;
825
+ }
826
+
827
+ .pure-kanban-modal__activity-name {
828
+ font-weight: 600;
829
+ color: #172B4D;
364
830
  }
365
831
 
366
- /* Dark mode support (optional) */
367
- @media (prefers-color-scheme: dark) {
832
+ .pure-kanban-modal__activity-text {
833
+ color: #6B778C;
834
+ }
835
+
836
+ .pure-kanban-modal__activity-time {
837
+ font-size: 0.75rem;
838
+ color: #6B778C;
839
+ margin-top: 0.25rem;
840
+ }
841
+
842
+ /* Sidebar */
843
+ .pure-kanban-modal__sidebar {
844
+ width: 320px;
845
+ border-left: 1px solid #E5E7EB;
846
+ background-color: #F4F5F7;
847
+ padding: 1.5rem;
848
+ overflow-y: auto;
849
+ }
850
+
851
+ .pure-kanban-modal__sidebar-section {
852
+ margin-bottom: 1.5rem;
853
+ }
854
+
855
+ .pure-kanban-modal__label-text {
856
+ display: block;
857
+ font-size: 0.75rem;
858
+ font-weight: 600;
859
+ color: #6B778C;
860
+ text-transform: uppercase;
861
+ letter-spacing: 0.05em;
862
+ margin-bottom: 0.5rem;
863
+ }
864
+
865
+ .pure-kanban-modal__select {
866
+ width: 100%;
867
+ padding: 0.5rem 0.75rem;
868
+ border: 1px solid #E5E7EB;
869
+ border-radius: 6px;
870
+ font-size: 0.875rem;
871
+ background-color: #ffffff;
872
+ cursor: pointer;
873
+ outline: none;
874
+ transition: all 0.2s;
875
+ }
876
+
877
+ .pure-kanban-modal__select:focus {
878
+ border-color: #0052CC;
879
+ box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.1);
880
+ }
881
+
882
+ .pure-kanban-modal__assignee-display,
883
+ .pure-kanban-modal__reporter-display,
884
+ .pure-kanban-modal__priority-display,
885
+ .pure-kanban-modal__story-points-display,
886
+ .pure-kanban-modal__due-date-display {
887
+ display: flex;
888
+ align-items: center;
889
+ gap: 0.5rem;
890
+ padding: 0.5rem;
891
+ border: 1px solid #E5E7EB;
892
+ border-radius: 6px;
893
+ background-color: #ffffff;
894
+ font-size: 0.875rem;
895
+ }
896
+
897
+ .pure-kanban-modal__assignee-avatar {
898
+ width: 32px;
899
+ height: 32px;
900
+ border-radius: 50%;
901
+ background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
902
+ display: flex;
903
+ align-items: center;
904
+ justify-content: center;
905
+ font-size: 0.875rem;
906
+ font-weight: 600;
907
+ color: #ffffff;
908
+ }
909
+
910
+ .pure-kanban-modal__sidebar-actions {
911
+ padding-top: 1.5rem;
912
+ border-top: 1px solid #E5E7EB;
913
+ display: flex;
914
+ flex-direction: column;
915
+ gap: 0.5rem;
916
+ }
917
+
918
+ .pure-kanban-modal__action-btn {
919
+ display: flex;
920
+ align-items: center;
921
+ justify-content: center;
922
+ gap: 0.5rem;
923
+ width: 100%;
924
+ padding: 0.5rem 1rem;
925
+ border: none;
926
+ border-radius: 6px;
927
+ font-size: 0.875rem;
928
+ font-weight: 500;
929
+ cursor: pointer;
930
+ transition: all 0.2s;
931
+ }
932
+
933
+ .pure-kanban-modal__action-btn--primary {
934
+ background-color: #0747A6;
935
+ color: #ffffff;
936
+ }
937
+
938
+ .pure-kanban-modal__action-btn--primary:hover {
939
+ background-color: #0052CC;
940
+ }
941
+
942
+ .pure-kanban-modal__action-btn--danger {
943
+ background-color: #ffffff;
944
+ color: #DE350B;
945
+ border: 1px solid #FFEBE6;
946
+ }
947
+
948
+ .pure-kanban-modal__action-btn--danger:hover {
949
+ background-color: #FFEBE6;
950
+ }
951
+
952
+ /* Responsive */
953
+ @media (max-width: 768px) {
368
954
  .pure-kanban {
369
- background-color: #1D2125;
955
+ padding: 0.5rem;
956
+ gap: 0.5rem;
370
957
  }
371
958
 
372
959
  .pure-kanban-column {
373
- background-color: #1D2125;
374
- }
375
-
376
- .pure-kanban-column__header {
377
- background-color: #22272B;
378
- border-top-color: #4C9AFF;
960
+ flex: 0 0 280px;
379
961
  }
380
962
 
381
- .pure-kanban-column__title {
382
- color: #B6C2CF;
963
+ .pure-kanban-header__nav {
964
+ display: none;
383
965
  }
384
966
 
385
- .pure-kanban-card {
386
- background-color: #22272B;
967
+ .pure-kanban-toolbar {
968
+ flex-wrap: wrap;
387
969
  }
388
970
 
389
- .pure-kanban-card__title {
390
- color: #B6C2CF;
971
+ .pure-kanban-modal {
972
+ flex-direction: column;
973
+ max-height: 95vh;
391
974
  }
392
975
 
393
- .pure-kanban-card__description {
394
- color: #8C9CB8;
976
+ .pure-kanban-modal__sidebar {
977
+ width: 100%;
978
+ border-left: none;
979
+ border-top: 1px solid #E5E7EB;
395
980
  }
396
981
  }
397
-