@keenmate/pure-admin-theme-corporate 1.0.0-rc05 → 1.0.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.
@@ -119,18 +119,17 @@ label {
119
119
  }
120
120
 
121
121
  *::-webkit-scrollbar-thumb {
122
- background: #e2e8f0;
122
+ background: var(--pa-border-color);
123
123
  border-radius: 3px;
124
124
  border: 1px solid var(--pa-primary-bg);
125
125
  }
126
126
 
127
127
  *::-webkit-scrollbar-thumb:hover {
128
- background: #0ea5e9;
129
- border-color: rgba(14, 165, 233, 0.08);
128
+ background: var(--pa-accent);
130
129
  }
131
130
 
132
131
  *::-webkit-scrollbar-thumb:active {
133
- background: rgba(14, 165, 233, 0.08);
132
+ background: var(--pa-accent-hover);
134
133
  }
135
134
 
136
135
  *::-webkit-scrollbar-corner {
@@ -216,6 +215,28 @@ body.pa-container-2xl .pa-navbar {
216
215
  gap: 1.6rem;
217
216
  }
218
217
 
218
+ .pa-header__left {
219
+ display: flex;
220
+ align-items: center;
221
+ gap: 1.6rem;
222
+ flex-shrink: 0;
223
+ }
224
+
225
+ .pa-header__center {
226
+ flex: 1;
227
+ min-width: 0;
228
+ display: flex;
229
+ align-items: center;
230
+ justify-content: center;
231
+ }
232
+
233
+ .pa-header__right {
234
+ display: flex;
235
+ align-items: center;
236
+ gap: 1.6rem;
237
+ flex-shrink: 0;
238
+ }
239
+
219
240
  /* ========================================
220
241
  Layout Container
221
242
  Main layout wrapper, content areas, sticky/scroll modes
@@ -301,28 +322,128 @@ body.pa-layout--sticky .pa-layout__inner {
301
322
  }
302
323
 
303
324
  .pa-layout__footer {
304
- height: 3.2rem;
325
+ min-height: 3.2rem;
305
326
  background-color: var(--pa-footer-bg);
306
327
  border-top: 1px solid var(--pa-footer-border-color);
307
328
  display: flex;
308
329
  align-items: center;
309
- padding: 0 1.6rem;
330
+ padding: 0.4rem 1.6rem;
310
331
  flex-shrink: 0;
332
+ gap: 1.6rem;
311
333
  }
312
334
 
335
+ .pa-footer__left {
336
+ display: flex;
337
+ align-items: center;
338
+ gap: 1.6rem;
339
+ flex-shrink: 0;
340
+ }
341
+
342
+ .pa-footer__center {
343
+ flex: 1;
344
+ min-width: 0;
345
+ display: flex;
346
+ align-items: center;
347
+ justify-content: center;
348
+ }
349
+
350
+ .pa-footer__right {
351
+ display: flex;
352
+ align-items: center;
353
+ gap: 1.6rem;
354
+ flex-shrink: 0;
355
+ }
356
+
357
+ .pa-footer__right--vertical {
358
+ flex-direction: column;
359
+ align-items: flex-end;
360
+ gap: 0.4rem;
361
+ }
362
+
363
+ @media (max-width: 768px) {
364
+ .pa-layout__footer {
365
+ flex-wrap: wrap;
366
+ min-height: auto;
367
+ padding: 0.8rem 1.6rem;
368
+ }
369
+ .pa-footer__left,
370
+ .pa-footer__center,
371
+ .pa-footer__right {
372
+ flex-shrink: 1;
373
+ min-width: 0;
374
+ }
375
+ .pa-footer__left {
376
+ flex: 1 1 auto;
377
+ }
378
+ .pa-footer__center {
379
+ display: none;
380
+ }
381
+ .pa-footer__right {
382
+ flex: 0 1 auto;
383
+ }
384
+ .pa-footer__right--vertical {
385
+ align-items: flex-end;
386
+ }
387
+ }
313
388
  /* ========================================
314
389
  Sidebar Component
315
390
  Sidebar navigation with nested submenus
316
391
  ======================================== */
392
+ :root {
393
+ --pa-sidebar-width: 29rem;
394
+ --pa-sidebar-min-width: 18rem;
395
+ --pa-sidebar-max-width: 50rem;
396
+ }
397
+
398
+ :where(.pa-layout__sidebar) {
399
+ width: var(--pa-sidebar-width);
400
+ }
401
+
317
402
  .pa-layout__sidebar {
318
- width: 29rem;
319
403
  background-color: var(--pa-sidebar-bg);
320
404
  border-right: 1px solid var(--pa-border-color);
321
405
  flex-shrink: 0;
406
+ position: relative;
407
+ }
408
+
409
+ .pa-sidebar-resize {
410
+ position: absolute;
411
+ top: 0;
412
+ right: 0;
413
+ width: 6px;
414
+ height: 100%;
415
+ cursor: ew-resize;
416
+ z-index: 100;
417
+ }
418
+
419
+ .pa-sidebar-resize::after {
420
+ content: "";
421
+ position: absolute;
422
+ top: 0;
423
+ left: 50%;
424
+ transform: translateX(-50%);
425
+ width: 2px;
426
+ height: 100%;
427
+ background-color: transparent;
428
+ transition: background-color 0.1s ease-out;
429
+ }
430
+
431
+ .pa-sidebar-resize:hover::after, .pa-sidebar-resize--active::after {
432
+ background-color: var(--pa-accent);
433
+ }
434
+
435
+ body.pa-sidebar-resizing {
436
+ cursor: ew-resize !important;
437
+ user-select: none;
438
+ }
439
+
440
+ body.pa-sidebar-resizing * {
441
+ cursor: ew-resize !important;
322
442
  }
323
443
 
324
444
  body.pa-layout--sticky .pa-layout__sidebar {
325
445
  overflow-y: auto;
446
+ overflow-y: overlay;
326
447
  overflow-x: visible;
327
448
  }
328
449
 
@@ -752,14 +873,6 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
752
873
  background-color: var(--pa-accent-hover);
753
874
  }
754
875
 
755
- .pa-header__nav--left {
756
- margin-right: auto;
757
- }
758
-
759
- .pa-header__nav--right {
760
- margin-left: auto;
761
- }
762
-
763
876
  .pa-header__nav-item--has-dropdown {
764
877
  position: static;
765
878
  }
@@ -2455,6 +2568,144 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
2455
2568
  padding-bottom: 0;
2456
2569
  }
2457
2570
 
2571
+ @media (max-width: 768px) {
2572
+ .pa-col-5 {
2573
+ flex: 0 0 100%;
2574
+ max-width: 100%;
2575
+ }
2576
+ .pa-col-10 {
2577
+ flex: 0 0 100%;
2578
+ max-width: 100%;
2579
+ }
2580
+ .pa-col-15 {
2581
+ flex: 0 0 100%;
2582
+ max-width: 100%;
2583
+ }
2584
+ .pa-col-20 {
2585
+ flex: 0 0 100%;
2586
+ max-width: 100%;
2587
+ }
2588
+ .pa-col-25 {
2589
+ flex: 0 0 100%;
2590
+ max-width: 100%;
2591
+ }
2592
+ .pa-col-30 {
2593
+ flex: 0 0 100%;
2594
+ max-width: 100%;
2595
+ }
2596
+ .pa-col-35 {
2597
+ flex: 0 0 100%;
2598
+ max-width: 100%;
2599
+ }
2600
+ .pa-col-40 {
2601
+ flex: 0 0 100%;
2602
+ max-width: 100%;
2603
+ }
2604
+ .pa-col-45 {
2605
+ flex: 0 0 100%;
2606
+ max-width: 100%;
2607
+ }
2608
+ .pa-col-50 {
2609
+ flex: 0 0 100%;
2610
+ max-width: 100%;
2611
+ }
2612
+ .pa-col-55 {
2613
+ flex: 0 0 100%;
2614
+ max-width: 100%;
2615
+ }
2616
+ .pa-col-60 {
2617
+ flex: 0 0 100%;
2618
+ max-width: 100%;
2619
+ }
2620
+ .pa-col-65 {
2621
+ flex: 0 0 100%;
2622
+ max-width: 100%;
2623
+ }
2624
+ .pa-col-70 {
2625
+ flex: 0 0 100%;
2626
+ max-width: 100%;
2627
+ }
2628
+ .pa-col-75 {
2629
+ flex: 0 0 100%;
2630
+ max-width: 100%;
2631
+ }
2632
+ .pa-col-80 {
2633
+ flex: 0 0 100%;
2634
+ max-width: 100%;
2635
+ }
2636
+ .pa-col-85 {
2637
+ flex: 0 0 100%;
2638
+ max-width: 100%;
2639
+ }
2640
+ .pa-col-90 {
2641
+ flex: 0 0 100%;
2642
+ max-width: 100%;
2643
+ }
2644
+ .pa-col-95 {
2645
+ flex: 0 0 100%;
2646
+ max-width: 100%;
2647
+ }
2648
+ .pa-col-1-2 {
2649
+ flex: 0 0 100%;
2650
+ max-width: 100%;
2651
+ }
2652
+ .pa-col-1-3 {
2653
+ flex: 0 0 100%;
2654
+ max-width: 100%;
2655
+ }
2656
+ .pa-col-2-3 {
2657
+ flex: 0 0 100%;
2658
+ max-width: 100%;
2659
+ }
2660
+ .pa-col-1-4 {
2661
+ flex: 0 0 100%;
2662
+ max-width: 100%;
2663
+ }
2664
+ .pa-col-3-4 {
2665
+ flex: 0 0 100%;
2666
+ max-width: 100%;
2667
+ }
2668
+ .pa-col-1-5 {
2669
+ flex: 0 0 100%;
2670
+ max-width: 100%;
2671
+ }
2672
+ .pa-col-2-5 {
2673
+ flex: 0 0 100%;
2674
+ max-width: 100%;
2675
+ }
2676
+ .pa-col-3-5 {
2677
+ flex: 0 0 100%;
2678
+ max-width: 100%;
2679
+ }
2680
+ .pa-col-4-5 {
2681
+ flex: 0 0 100%;
2682
+ max-width: 100%;
2683
+ }
2684
+ .pa-col-1-6 {
2685
+ flex: 0 0 100%;
2686
+ max-width: 100%;
2687
+ }
2688
+ .pa-col-5-6 {
2689
+ flex: 0 0 100%;
2690
+ max-width: 100%;
2691
+ }
2692
+ .pa-col-1-12 {
2693
+ flex: 0 0 100%;
2694
+ max-width: 100%;
2695
+ }
2696
+ .pa-col-5-12 {
2697
+ flex: 0 0 100%;
2698
+ max-width: 100%;
2699
+ }
2700
+ .pa-col-7-12 {
2701
+ flex: 0 0 100%;
2702
+ max-width: 100%;
2703
+ }
2704
+ .pa-col-11-12 {
2705
+ flex: 0 0 100%;
2706
+ max-width: 100%;
2707
+ }
2708
+ }
2458
2709
  /* ========================================
2459
2710
  Card Components
2460
2711
  Cards with headers, bodies, footers, variants, and card sections
@@ -3042,6 +3293,7 @@ a.pa-card p {
3042
3293
  border-radius: 8px;
3043
3294
  padding: 1.6rem 1rem;
3044
3295
  background-color: var(--pa-card-bg);
3296
+ margin-bottom: 1.6rem;
3045
3297
  }
3046
3298
 
3047
3299
  .pa-tabs__container--bordered .pa-tabs {
@@ -3061,6 +3313,7 @@ a.pa-card p {
3061
3313
  border-radius: 8px;
3062
3314
  background-color: var(--pa-card-bg);
3063
3315
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
3316
+ margin-bottom: 1.6rem;
3064
3317
  }
3065
3318
 
3066
3319
  .pa-tabs__container--card .pa-tabs {
@@ -3186,6 +3439,7 @@ a.pa-card p {
3186
3439
  border-radius: 8px;
3187
3440
  padding: 1.6rem 1rem;
3188
3441
  background-color: var(--pa-card-bg);
3442
+ margin-bottom: 1.6rem;
3189
3443
  }
3190
3444
 
3191
3445
  .pa-tabs__vertical-layout--bordered .pa-tabs--vertical {
@@ -6381,10 +6635,11 @@ a.pa-card p {
6381
6635
  .pa-input-group__prepend, .pa-input-group__append {
6382
6636
  display: flex;
6383
6637
  align-items: center;
6384
- padding: 0.8rem 0.8rem;
6638
+ height: 3.5rem;
6639
+ line-height: 3.5rem;
6640
+ padding: 0 0.8rem;
6385
6641
  border: 1px solid var(--pa-border-color);
6386
6642
  font-size: 1.4rem;
6387
- line-height: 1;
6388
6643
  white-space: nowrap;
6389
6644
  border-radius: 0;
6390
6645
  }
@@ -6419,32 +6674,29 @@ a.pa-card p {
6419
6674
  border-left: 1px solid var(--pa-border-color);
6420
6675
  }
6421
6676
 
6422
- .pa-input-group:focus-within .pa-input-group__prepend {
6677
+ .pa-input-group:has(.pa-input:focus) .pa-input-group__prepend {
6423
6678
  border-right: 1px solid var(--pa-input-focus-border-color);
6424
6679
  }
6425
6680
 
6426
- .pa-input-group:focus-within .pa-input-group__prepend:has(+ .pa-input-group__prepend) {
6681
+ .pa-input-group:has(.pa-input:focus) .pa-input-group__prepend:has(+ .pa-input-group__prepend) {
6427
6682
  border-right: none;
6428
6683
  }
6429
6684
 
6430
- .pa-input-group:focus-within .pa-input-group__append {
6685
+ .pa-input-group:has(.pa-input:focus) .pa-input-group__append {
6431
6686
  border-left: 1px solid var(--pa-input-focus-border-color);
6432
6687
  }
6433
6688
 
6434
- .pa-input-group:focus-within .pa-input-group__append + .pa-input-group__append {
6689
+ .pa-input-group:has(.pa-input:focus) .pa-input-group__append + .pa-input-group__append {
6435
6690
  border-left: 1px solid var(--pa-border-color);
6436
6691
  }
6437
6692
 
6438
6693
  .pa-input-group__button {
6439
6694
  border-radius: 0;
6440
- border-color: var(--pa-border-color);
6441
- border-left: none;
6442
6695
  }
6443
6696
 
6444
6697
  .pa-input-group__button:first-child {
6445
6698
  border-top-left-radius: 4px;
6446
6699
  border-bottom-left-radius: 4px;
6447
- border-left: 1px solid var(--pa-border-color);
6448
6700
  }
6449
6701
 
6450
6702
  .pa-input-group__button:last-child {
@@ -6454,25 +6706,29 @@ a.pa-card p {
6454
6706
 
6455
6707
  .pa-input-group--xs .pa-input-group__prepend,
6456
6708
  .pa-input-group--xs .pa-input-group__append {
6457
- padding: 0.6rem 0.8rem;
6709
+ height: 3.1rem;
6710
+ line-height: 3.1rem;
6458
6711
  font-size: 1.2rem;
6459
6712
  }
6460
6713
 
6461
6714
  .pa-input-group--sm .pa-input-group__prepend,
6462
6715
  .pa-input-group--sm .pa-input-group__append {
6463
- padding: 0.8rem 0.8rem;
6716
+ height: 3.3rem;
6717
+ line-height: 3.3rem;
6464
6718
  font-size: 1.4rem;
6465
6719
  }
6466
6720
 
6467
6721
  .pa-input-group--lg .pa-input-group__prepend,
6468
6722
  .pa-input-group--lg .pa-input-group__append {
6469
- padding: 0.8rem 0.8rem;
6723
+ height: 3.8rem;
6724
+ line-height: 3.8rem;
6470
6725
  font-size: 1.6rem;
6471
6726
  }
6472
6727
 
6473
6728
  .pa-input-group--xl .pa-input-group__prepend,
6474
6729
  .pa-input-group--xl .pa-input-group__append {
6475
- padding: 0.8rem 0.8rem;
6730
+ height: 4.1rem;
6731
+ line-height: 4.1rem;
6476
6732
  font-size: 1.8rem;
6477
6733
  }
6478
6734
 
@@ -9134,6 +9390,16 @@ code {
9134
9390
  Profile Panel Components
9135
9391
  Profile panel and header button
9136
9392
  ======================================== */
9393
+ :root {
9394
+ --pa-profile-panel-width: 20vw;
9395
+ --pa-profile-panel-max-width: 48rem;
9396
+ }
9397
+
9398
+ :where(.pa-profile-panel__content) {
9399
+ width: var(--pa-profile-panel-width);
9400
+ max-width: var(--pa-profile-panel-max-width);
9401
+ }
9402
+
9137
9403
  .pa-header__profile-btn {
9138
9404
  display: flex;
9139
9405
  align-items: center;
@@ -9197,8 +9463,6 @@ code {
9197
9463
  position: absolute;
9198
9464
  top: 0;
9199
9465
  right: 0;
9200
- width: 20vw;
9201
- max-width: 48rem;
9202
9466
  height: 100vh;
9203
9467
  background-color: var(--pa-card-bg);
9204
9468
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
@@ -11409,6 +11673,60 @@ code {
11409
11673
  right: -1.6rem;
11410
11674
  }
11411
11675
  }
11676
+ .pa-notifications__list--page {
11677
+ max-height: none;
11678
+ overflow: visible;
11679
+ }
11680
+
11681
+ .pa-notifications__list--page .pa-notifications__item {
11682
+ padding: 1.6rem 2.4rem;
11683
+ }
11684
+
11685
+ .pa-notifications__list--page .pa-notifications__icon-wrapper {
11686
+ width: 4rem;
11687
+ height: 4rem;
11688
+ font-size: 1.8rem;
11689
+ }
11690
+
11691
+ .pa-notifications__list--page .pa-notifications__content h4 {
11692
+ font-size: 1.4rem;
11693
+ margin-bottom: 0.4rem;
11694
+ }
11695
+
11696
+ .pa-notifications__list--page .pa-notifications__content p {
11697
+ font-size: 1.4rem;
11698
+ -webkit-line-clamp: 3;
11699
+ }
11700
+
11701
+ .pa-notifications__list--page .pa-notifications__time {
11702
+ font-size: 1.2rem;
11703
+ }
11704
+
11705
+ .pa-notifications__actions {
11706
+ display: flex;
11707
+ gap: 0.4rem;
11708
+ flex-shrink: 0;
11709
+ opacity: 0;
11710
+ transition: opacity 0.1s ease-out;
11711
+ }
11712
+
11713
+ .pa-notifications__item:hover .pa-notifications__actions {
11714
+ opacity: 1;
11715
+ }
11716
+
11717
+ @media (max-width: 768px) {
11718
+ .pa-notifications__list--page .pa-notifications__item {
11719
+ flex-wrap: wrap;
11720
+ }
11721
+ .pa-notifications__list--page .pa-notifications__actions {
11722
+ opacity: 1;
11723
+ width: 100%;
11724
+ justify-content: flex-end;
11725
+ margin-top: 0.8rem;
11726
+ padding-top: 0.8rem;
11727
+ border-top: 1px solid var(--pa-border-color);
11728
+ }
11729
+ }
11412
11730
  /* ========================================
11413
11731
  Popconfirm Component
11414
11732
  Small confirmation dialog anchored to trigger button
@@ -11900,6 +12218,21 @@ html.font-size-4xl {
11900
12218
  overflow: visible;
11901
12219
  }
11902
12220
 
12221
+ .overflow-overlay {
12222
+ overflow: auto;
12223
+ overflow: overlay;
12224
+ }
12225
+
12226
+ .overflow-y-overlay {
12227
+ overflow-y: auto;
12228
+ overflow-y: overlay;
12229
+ }
12230
+
12231
+ .overflow-x-overlay {
12232
+ overflow-x: auto;
12233
+ overflow-x: overlay;
12234
+ }
12235
+
11903
12236
  .cursor-pointer {
11904
12237
  cursor: pointer;
11905
12238
  }
@@ -12120,6 +12453,26 @@ html.font-size-4xl {
12120
12453
  column-gap: 2.4rem;
12121
12454
  }
12122
12455
 
12456
+ .self-start {
12457
+ align-self: flex-start;
12458
+ }
12459
+
12460
+ .self-center {
12461
+ align-self: center;
12462
+ }
12463
+
12464
+ .self-end {
12465
+ align-self: flex-end;
12466
+ }
12467
+
12468
+ .self-stretch {
12469
+ align-self: stretch;
12470
+ }
12471
+
12472
+ .self-baseline {
12473
+ align-self: baseline;
12474
+ }
12475
+
12123
12476
  .text-2xs {
12124
12477
  font-size: 1rem;
12125
12478
  }
@@ -12160,6 +12513,12 @@ html.font-size-4xl {
12160
12513
  font-size: 3.2rem;
12161
12514
  }
12162
12515
 
12516
+ .text-truncate {
12517
+ overflow: hidden;
12518
+ text-overflow: ellipsis;
12519
+ white-space: nowrap;
12520
+ }
12521
+
12163
12522
  .component-showcase {
12164
12523
  display: flex;
12165
12524
  flex-wrap: wrap;
@@ -12203,6 +12562,114 @@ html.font-size-4xl {
12203
12562
  align-items: flex-start;
12204
12563
  }
12205
12564
 
12565
+ .pa-bg-color-1 {
12566
+ background-color: var(--pa-color-1);
12567
+ }
12568
+
12569
+ .pa-text-color-1 {
12570
+ color: var(--pa-color-1);
12571
+ }
12572
+
12573
+ .pa-border-color-1 {
12574
+ border-color: var(--pa-color-1);
12575
+ }
12576
+
12577
+ .pa-bg-color-2 {
12578
+ background-color: var(--pa-color-2);
12579
+ }
12580
+
12581
+ .pa-text-color-2 {
12582
+ color: var(--pa-color-2);
12583
+ }
12584
+
12585
+ .pa-border-color-2 {
12586
+ border-color: var(--pa-color-2);
12587
+ }
12588
+
12589
+ .pa-bg-color-3 {
12590
+ background-color: var(--pa-color-3);
12591
+ }
12592
+
12593
+ .pa-text-color-3 {
12594
+ color: var(--pa-color-3);
12595
+ }
12596
+
12597
+ .pa-border-color-3 {
12598
+ border-color: var(--pa-color-3);
12599
+ }
12600
+
12601
+ .pa-bg-color-4 {
12602
+ background-color: var(--pa-color-4);
12603
+ }
12604
+
12605
+ .pa-text-color-4 {
12606
+ color: var(--pa-color-4);
12607
+ }
12608
+
12609
+ .pa-border-color-4 {
12610
+ border-color: var(--pa-color-4);
12611
+ }
12612
+
12613
+ .pa-bg-color-5 {
12614
+ background-color: var(--pa-color-5);
12615
+ }
12616
+
12617
+ .pa-text-color-5 {
12618
+ color: var(--pa-color-5);
12619
+ }
12620
+
12621
+ .pa-border-color-5 {
12622
+ border-color: var(--pa-color-5);
12623
+ }
12624
+
12625
+ .pa-bg-color-6 {
12626
+ background-color: var(--pa-color-6);
12627
+ }
12628
+
12629
+ .pa-text-color-6 {
12630
+ color: var(--pa-color-6);
12631
+ }
12632
+
12633
+ .pa-border-color-6 {
12634
+ border-color: var(--pa-color-6);
12635
+ }
12636
+
12637
+ .pa-bg-color-7 {
12638
+ background-color: var(--pa-color-7);
12639
+ }
12640
+
12641
+ .pa-text-color-7 {
12642
+ color: var(--pa-color-7);
12643
+ }
12644
+
12645
+ .pa-border-color-7 {
12646
+ border-color: var(--pa-color-7);
12647
+ }
12648
+
12649
+ .pa-bg-color-8 {
12650
+ background-color: var(--pa-color-8);
12651
+ }
12652
+
12653
+ .pa-text-color-8 {
12654
+ color: var(--pa-color-8);
12655
+ }
12656
+
12657
+ .pa-border-color-8 {
12658
+ border-color: var(--pa-color-8);
12659
+ }
12660
+
12661
+ .pa-bg-color-9 {
12662
+ background-color: var(--pa-color-9);
12663
+ }
12664
+
12665
+ .pa-text-color-9 {
12666
+ color: var(--pa-color-9);
12667
+ }
12668
+
12669
+ .pa-border-color-9 {
12670
+ border-color: var(--pa-color-9);
12671
+ }
12672
+
12206
12673
  .m-0 {
12207
12674
  margin: 0 !important;
12208
12675
  }
@@ -13159,6 +13626,10 @@ html.font-size-4xl {
13159
13626
  width: auto !important;
13160
13627
  }
13161
13628
 
13629
+ .w-1-2 {
13630
+ width: 50% !important;
13631
+ }
13632
+
13162
13633
  .w-1-3 {
13163
13634
  width: 33.333333% !important;
13164
13635
  }
@@ -13167,6 +13638,14 @@ html.font-size-4xl {
13167
13638
  width: 66.666667% !important;
13168
13639
  }
13169
13640
 
13641
+ .w-1-4 {
13642
+ width: 25% !important;
13643
+ }
13644
+
13645
+ .w-3-4 {
13646
+ width: 75% !important;
13647
+ }
13648
+
13170
13649
  .mw-25 {
13171
13650
  min-width: 25% !important;
13172
13651
  }
@@ -13187,6 +13666,10 @@ html.font-size-4xl {
13187
13666
  min-width: auto !important;
13188
13667
  }
13189
13668
 
13669
+ .mw-1-2 {
13670
+ min-width: 50% !important;
13671
+ }
13672
+
13190
13673
  .mw-1-3 {
13191
13674
  min-width: 33.333333% !important;
13192
13675
  }
@@ -13195,6 +13678,14 @@ html.font-size-4xl {
13195
13678
  min-width: 66.666667% !important;
13196
13679
  }
13197
13680
 
13681
+ .mw-1-4 {
13682
+ min-width: 25% !important;
13683
+ }
13684
+
13685
+ .mw-3-4 {
13686
+ min-width: 75% !important;
13687
+ }
13688
+
13198
13689
  .w-25-fixed {
13199
13690
  min-width: 25% !important;
13200
13691
  width: 25% !important;
@@ -13215,6 +13706,11 @@ html.font-size-4xl {
13215
13706
  width: 100% !important;
13216
13707
  }
13217
13708
 
13709
+ .w-1-2-fixed {
13710
+ min-width: 50% !important;
13711
+ width: 50% !important;
13712
+ }
13713
+
13218
13714
  .w-1-3-fixed {
13219
13715
  min-width: 33.333333% !important;
13220
13716
  width: 33.333333% !important;
@@ -13225,6 +13721,16 @@ html.font-size-4xl {
13225
13721
  width: 66.666667% !important;
13226
13722
  }
13227
13723
 
13724
+ .w-1-4-fixed {
13725
+ min-width: 25% !important;
13726
+ width: 25% !important;
13727
+ }
13728
+
13729
+ .w-3-4-fixed {
13730
+ min-width: 75% !important;
13731
+ width: 75% !important;
13732
+ }
13733
+
13228
13734
  .h-25 {
13229
13735
  height: 25% !important;
13230
13736
  }
@@ -13245,6 +13751,26 @@ html.font-size-4xl {
13245
13751
  height: auto !important;
13246
13752
  }
13247
13753
 
13754
+ .h-1-2 {
13755
+ height: 50% !important;
13756
+ }
13757
+
13758
+ .h-1-3 {
13759
+ height: 33.333333% !important;
13760
+ }
13761
+
13762
+ .h-2-3 {
13763
+ height: 66.666667% !important;
13764
+ }
13765
+
13766
+ .h-1-4 {
13767
+ height: 25% !important;
13768
+ }
13769
+
13770
+ .h-3-4 {
13771
+ height: 75% !important;
13772
+ }
13773
+
13248
13774
  .wr-1 {
13249
13775
  width: 1rem !important;
13250
13776
  }
@@ -13297,6 +13823,26 @@ html.font-size-4xl {
13297
13823
  width: 25rem !important;
13298
13824
  }
13299
13825
 
13826
+ .wr-30 {
13827
+ width: 30rem !important;
13828
+ }
13829
+
13830
+ .wr-35 {
13831
+ width: 35rem !important;
13832
+ }
13833
+
13834
+ .wr-40 {
13835
+ width: 40rem !important;
13836
+ }
13837
+
13838
+ .wr-45 {
13839
+ width: 45rem !important;
13840
+ }
13841
+
13842
+ .wr-50 {
13843
+ width: 50rem !important;
13844
+ }
13845
+
13300
13846
  .minwr-1 {
13301
13847
  min-width: 1rem !important;
13302
13848
  }
@@ -13349,6 +13895,26 @@ html.font-size-4xl {
13349
13895
  min-width: 25rem !important;
13350
13896
  }
13351
13897
 
13898
+ .minwr-30 {
13899
+ min-width: 30rem !important;
13900
+ }
13901
+
13902
+ .minwr-35 {
13903
+ min-width: 35rem !important;
13904
+ }
13905
+
13906
+ .minwr-40 {
13907
+ min-width: 40rem !important;
13908
+ }
13909
+
13910
+ .minwr-45 {
13911
+ min-width: 45rem !important;
13912
+ }
13913
+
13914
+ .minwr-50 {
13915
+ min-width: 50rem !important;
13916
+ }
13917
+
13352
13918
  .maxwr-1 {
13353
13919
  max-width: 1rem !important;
13354
13920
  }
@@ -13401,6 +13967,26 @@ html.font-size-4xl {
13401
13967
  max-width: 25rem !important;
13402
13968
  }
13403
13969
 
13970
+ .maxwr-30 {
13971
+ max-width: 30rem !important;
13972
+ }
13973
+
13974
+ .maxwr-35 {
13975
+ max-width: 35rem !important;
13976
+ }
13977
+
13978
+ .maxwr-40 {
13979
+ max-width: 40rem !important;
13980
+ }
13981
+
13982
+ .maxwr-45 {
13983
+ max-width: 45rem !important;
13984
+ }
13985
+
13986
+ .maxwr-50 {
13987
+ max-width: 50rem !important;
13988
+ }
13989
+
13404
13990
  .hr-1 {
13405
13991
  height: 1rem !important;
13406
13992
  }
@@ -13453,6 +14039,26 @@ html.font-size-4xl {
13453
14039
  height: 25rem !important;
13454
14040
  }
13455
14041
 
14042
+ .hr-30 {
14043
+ height: 30rem !important;
14044
+ }
14045
+
14046
+ .hr-35 {
14047
+ height: 35rem !important;
14048
+ }
14049
+
14050
+ .hr-40 {
14051
+ height: 40rem !important;
14052
+ }
14053
+
14054
+ .hr-45 {
14055
+ height: 45rem !important;
14056
+ }
14057
+
14058
+ .hr-50 {
14059
+ height: 50rem !important;
14060
+ }
14061
+
13456
14062
  .minhr-1 {
13457
14063
  min-height: 1rem !important;
13458
14064
  }
@@ -13505,6 +14111,26 @@ html.font-size-4xl {
13505
14111
  min-height: 25rem !important;
13506
14112
  }
13507
14113
 
14114
+ .minhr-30 {
14115
+ min-height: 30rem !important;
14116
+ }
14117
+
14118
+ .minhr-35 {
14119
+ min-height: 35rem !important;
14120
+ }
14121
+
14122
+ .minhr-40 {
14123
+ min-height: 40rem !important;
14124
+ }
14125
+
14126
+ .minhr-45 {
14127
+ min-height: 45rem !important;
14128
+ }
14129
+
14130
+ .minhr-50 {
14131
+ min-height: 50rem !important;
14132
+ }
14133
+
13508
14134
  .maxhr-1 {
13509
14135
  max-height: 1rem !important;
13510
14136
  }
@@ -13557,6 +14183,26 @@ html.font-size-4xl {
13557
14183
  max-height: 25rem !important;
13558
14184
  }
13559
14185
 
14186
+ .maxhr-30 {
14187
+ max-height: 30rem !important;
14188
+ }
14189
+
14190
+ .maxhr-35 {
14191
+ max-height: 35rem !important;
14192
+ }
14193
+
14194
+ .maxhr-40 {
14195
+ max-height: 40rem !important;
14196
+ }
14197
+
14198
+ .maxhr-45 {
14199
+ max-height: 45rem !important;
14200
+ }
14201
+
14202
+ .maxhr-50 {
14203
+ max-height: 50rem !important;
14204
+ }
14205
+
13560
14206
  .minw-5 {
13561
14207
  min-width: 5% !important;
13562
14208
  }
@@ -13725,6 +14371,10 @@ html.font-size-4xl {
13725
14371
  max-width: 100% !important;
13726
14372
  }
13727
14373
 
14374
+ .maxw-1-2 {
14375
+ max-width: 50% !important;
14376
+ }
14377
+
13728
14378
  .maxw-1-3 {
13729
14379
  max-width: 33.333333% !important;
13730
14380
  }
@@ -13733,6 +14383,14 @@ html.font-size-4xl {
13733
14383
  max-width: 66.666667% !important;
13734
14384
  }
13735
14385
 
14386
+ .maxw-1-4 {
14387
+ max-width: 25% !important;
14388
+ }
14389
+
14390
+ .maxw-3-4 {
14391
+ max-width: 75% !important;
14392
+ }
14393
+
13736
14394
  .minh-5 {
13737
14395
  min-height: 5% !important;
13738
14396
  }
@@ -13813,6 +14471,10 @@ html.font-size-4xl {
13813
14471
  min-height: 100% !important;
13814
14472
  }
13815
14473
 
14474
+ .minh-1-2 {
14475
+ min-height: 50% !important;
14476
+ }
14477
+
13816
14478
  .minh-1-3 {
13817
14479
  min-height: 33.333333% !important;
13818
14480
  }
@@ -13821,6 +14483,14 @@ html.font-size-4xl {
13821
14483
  min-height: 66.666667% !important;
13822
14484
  }
13823
14485
 
14486
+ .minh-1-4 {
14487
+ min-height: 25% !important;
14488
+ }
14489
+
14490
+ .minh-3-4 {
14491
+ min-height: 75% !important;
14492
+ }
14493
+
13824
14494
  .maxh-5 {
13825
14495
  max-height: 5% !important;
13826
14496
  }
@@ -13901,6 +14571,10 @@ html.font-size-4xl {
13901
14571
  max-height: 100% !important;
13902
14572
  }
13903
14573
 
14574
+ .maxh-1-2 {
14575
+ max-height: 50% !important;
14576
+ }
14577
+
13904
14578
  .maxh-1-3 {
13905
14579
  max-height: 33.333333% !important;
13906
14580
  }
@@ -13909,6 +14583,14 @@ html.font-size-4xl {
13909
14583
  max-height: 66.666667% !important;
13910
14584
  }
13911
14585
 
14586
+ .maxh-1-4 {
14587
+ max-height: 25% !important;
14588
+ }
14589
+
14590
+ .maxh-3-4 {
14591
+ max-height: 75% !important;
14592
+ }
14593
+
13912
14594
  .position-static {
13913
14595
  position: static !important;
13914
14596
  }
@@ -14139,6 +14821,16 @@ html.font-size-4xl {
14139
14821
  border-color: #0ea5e9 !important;
14140
14822
  }
14141
14823
 
14824
+ .pa-layout__footer {
14825
+ color: #cbd5e1;
14826
+ }
14827
+ .pa-layout__footer a {
14828
+ color: #ffffff;
14829
+ }
14830
+ .pa-layout__footer a:hover {
14831
+ color: #0ea5e9;
14832
+ }
14833
+
14142
14834
  :root, .pa-mode-light {
14143
14835
  --page-loader-bg: rgba(255, 255, 255, 0.95);
14144
14836
  --page-loader-spinner-border: #ccc;
@@ -14383,15 +15075,19 @@ html.font-size-4xl {
14383
15075
  --pa-multiselect-option-hover-bg: #f8fafc;
14384
15076
  --pa-multiselect-pill-bg: rgba(14, 165, 233, 0.05);
14385
15077
  --pa-multiselect-pill-border: #0ea5e9;
14386
- --pa-color-1: transparent;
14387
- --pa-color-2: transparent;
14388
- --pa-color-3: transparent;
14389
- --pa-color-4: transparent;
14390
- --pa-color-5: transparent;
14391
- --pa-color-6: transparent;
14392
- --pa-color-7: transparent;
14393
- --pa-color-8: transparent;
14394
- --pa-color-9: transparent;
15078
+ --pa-color-1: #0284c7;
15079
+ --pa-color-2: #0ea5e9;
15080
+ --pa-color-3: #10b981;
15081
+ --pa-color-4: #f59e0b;
15082
+ --pa-color-5: #6366f1;
15083
+ --pa-color-6: #8b5cf6;
15084
+ --pa-color-7: #64748b;
15085
+ --pa-color-8: #334155;
15086
+ --pa-color-9: #ec4899;
15087
+ --pa-input-group-prepend-bg: #f1f5f9;
15088
+ --pa-input-group-prepend-text: #334155;
15089
+ --pa-input-group-append-bg: #f1f5f9;
15090
+ --pa-input-group-append-text: #334155;
14395
15091
  --drp-dropdown-bg: #ffffff;
14396
15092
  --drp-border-color: #e2e8f0;
14397
15093
  --drp-primary-bg: #f8fafc;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@keenmate/pure-admin-theme-corporate",
3
- "version": "1.0.0-rc05",
3
+ "version": "1.0.0",
4
4
  "description": "Corporate theme for Pure Admin",
5
5
  "style": "dist/corporate.css",
6
6
  "exports": {
@@ -19,10 +19,10 @@
19
19
  "author": "KeenMate",
20
20
  "license": "MIT",
21
21
  "peerDependencies": {
22
- "@keenmate/pure-admin-core": "^1.0.0-rc05"
22
+ "@keenmate/pure-admin-core": "^1.0.0"
23
23
  },
24
24
  "devDependencies": {
25
- "@keenmate/pure-admin-core": "^1.0.0-rc05",
25
+ "@keenmate/pure-admin-core": "^1.0.0",
26
26
  "sass": "^1.70.0"
27
27
  },
28
28
  "publishConfig": {
@@ -1,6 +1,19 @@
1
1
  /* Corporate Theme for Pure Admin Visual - Professional blue/gray palette */
2
2
  @use 'sass:color';
3
3
 
4
+ // =============================================================================
5
+ // THEME COLOR SLOTS (1-9) - Corporate professional palette
6
+ // =============================================================================
7
+ $color-1: #0284c7; // Corporate Blue (primary)
8
+ $color-2: #0ea5e9; // Sky Blue (lighter)
9
+ $color-3: #10b981; // Emerald (success)
10
+ $color-4: #f59e0b; // Amber (attention)
11
+ $color-5: #6366f1; // Indigo (accent)
12
+ $color-6: #8b5cf6; // Violet (creative)
13
+ $color-7: #64748b; // Slate (neutral)
14
+ $color-8: #334155; // Dark Slate (contrast)
15
+ $color-9: #ec4899; // Pink (highlight)
16
+
4
17
  // =============================================================================
5
18
  // CORPORATE COLOR PALETTE
6
19
  // =============================================================================
@@ -235,6 +248,19 @@ $checkbox-focus-shadow: 0 0 0 2px rgba($base-accent-color, 0.25);
235
248
  }
236
249
  }
237
250
 
251
+ // Footer - light text on dark background
252
+ .pa-layout__footer {
253
+ color: $corporate-slate-300;
254
+
255
+ a {
256
+ color: #ffffff;
257
+
258
+ &:hover {
259
+ color: $corporate-blue-500;
260
+ }
261
+ }
262
+ }
263
+
238
264
  // =============================================================================
239
265
  // CSS VARIABLES - LIGHT MODE (Default)
240
266
  // =============================================================================
@@ -247,6 +273,12 @@ $checkbox-focus-shadow: 0 0 0 2px rgba($base-accent-color, 0.25);
247
273
  @include output-base-css-variables;
248
274
  @include output-pa-css-variables;
249
275
 
276
+ // Input group - light gray background for light mode
277
+ --pa-input-group-prepend-bg: #{$corporate-slate-100};
278
+ --pa-input-group-prepend-text: #{$corporate-slate-700};
279
+ --pa-input-group-append-bg: #{$corporate-slate-100};
280
+ --pa-input-group-append-text: #{$corporate-slate-700};
281
+
250
282
  // Web component overrides (light mode)
251
283
  --drp-dropdown-bg: #ffffff;
252
284
  --drp-border-color: #{$corporate-slate-200};