@keenmate/pure-admin-core 1.0.0-rc01 → 1.0.0-rc03

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/css/main.css CHANGED
@@ -872,26 +872,82 @@
872
872
  white-space: nowrap !important;
873
873
  }
874
874
 
875
+ .w-5 {
876
+ width: 5% !important;
877
+ }
878
+
879
+ .w-10 {
880
+ width: 10% !important;
881
+ }
882
+
883
+ .w-15 {
884
+ width: 15% !important;
885
+ }
886
+
887
+ .w-20 {
888
+ width: 20% !important;
889
+ }
890
+
875
891
  .w-25 {
876
892
  width: 25% !important;
877
893
  }
878
894
 
879
- .w-33 {
880
- width: 33.333333% !important;
895
+ .w-30 {
896
+ width: 30% !important;
897
+ }
898
+
899
+ .w-35 {
900
+ width: 35% !important;
901
+ }
902
+
903
+ .w-40 {
904
+ width: 40% !important;
905
+ }
906
+
907
+ .w-45 {
908
+ width: 45% !important;
881
909
  }
882
910
 
883
911
  .w-50 {
884
912
  width: 50% !important;
885
913
  }
886
914
 
887
- .w-66 {
888
- width: 66.666667% !important;
915
+ .w-55 {
916
+ width: 55% !important;
917
+ }
918
+
919
+ .w-60 {
920
+ width: 60% !important;
921
+ }
922
+
923
+ .w-65 {
924
+ width: 65% !important;
925
+ }
926
+
927
+ .w-70 {
928
+ width: 70% !important;
889
929
  }
890
930
 
891
931
  .w-75 {
892
932
  width: 75% !important;
893
933
  }
894
934
 
935
+ .w-80 {
936
+ width: 80% !important;
937
+ }
938
+
939
+ .w-85 {
940
+ width: 85% !important;
941
+ }
942
+
943
+ .w-90 {
944
+ width: 90% !important;
945
+ }
946
+
947
+ .w-95 {
948
+ width: 95% !important;
949
+ }
950
+
895
951
  .w-100 {
896
952
  width: 100% !important;
897
953
  }
@@ -900,20 +956,20 @@
900
956
  width: auto !important;
901
957
  }
902
958
 
903
- .mw-25 {
904
- min-width: 25% !important;
959
+ .w-1-3 {
960
+ width: 33.333333% !important;
905
961
  }
906
962
 
907
- .mw-33 {
908
- min-width: 33.333333% !important;
963
+ .w-2-3 {
964
+ width: 66.666667% !important;
909
965
  }
910
966
 
911
- .mw-50 {
912
- min-width: 50% !important;
967
+ .mw-25 {
968
+ min-width: 25% !important;
913
969
  }
914
970
 
915
- .mw-66 {
916
- min-width: 66.666667% !important;
971
+ .mw-50 {
972
+ min-width: 50% !important;
917
973
  }
918
974
 
919
975
  .mw-75 {
@@ -928,26 +984,24 @@
928
984
  min-width: auto !important;
929
985
  }
930
986
 
987
+ .mw-1-3 {
988
+ min-width: 33.333333% !important;
989
+ }
990
+
991
+ .mw-2-3 {
992
+ min-width: 66.666667% !important;
993
+ }
994
+
931
995
  .w-25-fixed {
932
996
  min-width: 25% !important;
933
997
  width: 25% !important;
934
998
  }
935
999
 
936
- .w-33-fixed {
937
- min-width: 33.333333% !important;
938
- width: 33.333333% !important;
939
- }
940
-
941
1000
  .w-50-fixed {
942
1001
  min-width: 50% !important;
943
1002
  width: 50% !important;
944
1003
  }
945
1004
 
946
- .w-66-fixed {
947
- min-width: 66.666667% !important;
948
- width: 66.666667% !important;
949
- }
950
-
951
1005
  .w-75-fixed {
952
1006
  min-width: 75% !important;
953
1007
  width: 75% !important;
@@ -958,6 +1012,16 @@
958
1012
  width: 100% !important;
959
1013
  }
960
1014
 
1015
+ .w-1-3-fixed {
1016
+ min-width: 33.333333% !important;
1017
+ width: 33.333333% !important;
1018
+ }
1019
+
1020
+ .w-2-3-fixed {
1021
+ min-width: 66.666667% !important;
1022
+ width: 66.666667% !important;
1023
+ }
1024
+
961
1025
  .h-25 {
962
1026
  height: 25% !important;
963
1027
  }
@@ -1038,6 +1102,78 @@
1038
1102
  border-left: 0 !important;
1039
1103
  }
1040
1104
 
1105
+ .border-solid {
1106
+ border-style: solid !important;
1107
+ }
1108
+
1109
+ .border-dashed {
1110
+ border-style: dashed !important;
1111
+ }
1112
+
1113
+ .border-dotted {
1114
+ border-style: dotted !important;
1115
+ }
1116
+
1117
+ .border-none {
1118
+ border-style: none !important;
1119
+ }
1120
+
1121
+ .text-primary {
1122
+ color: var(--pa-accent) !important;
1123
+ }
1124
+
1125
+ .text-success {
1126
+ color: var(--pa-success-text) !important;
1127
+ }
1128
+
1129
+ .text-danger {
1130
+ color: var(--pa-danger-text) !important;
1131
+ }
1132
+
1133
+ .text-warning {
1134
+ color: var(--pa-warning-text) !important;
1135
+ }
1136
+
1137
+ .text-info {
1138
+ color: var(--pa-info-text) !important;
1139
+ }
1140
+
1141
+ .text-color-1 {
1142
+ color: var(--pa-color-1) !important;
1143
+ }
1144
+
1145
+ .text-color-2 {
1146
+ color: var(--pa-color-2) !important;
1147
+ }
1148
+
1149
+ .text-color-3 {
1150
+ color: var(--pa-color-3) !important;
1151
+ }
1152
+
1153
+ .text-color-4 {
1154
+ color: var(--pa-color-4) !important;
1155
+ }
1156
+
1157
+ .text-color-5 {
1158
+ color: var(--pa-color-5) !important;
1159
+ }
1160
+
1161
+ .text-color-6 {
1162
+ color: var(--pa-color-6) !important;
1163
+ }
1164
+
1165
+ .text-color-7 {
1166
+ color: var(--pa-color-7) !important;
1167
+ }
1168
+
1169
+ .text-color-8 {
1170
+ color: var(--pa-color-8) !important;
1171
+ }
1172
+
1173
+ .text-color-9 {
1174
+ color: var(--pa-color-9) !important;
1175
+ }
1176
+
1041
1177
  .rounded {
1042
1178
  border-radius: var(--border-radius) !important;
1043
1179
  }
@@ -1200,6 +1336,43 @@ label {
1200
1336
  font-size: inherit;
1201
1337
  }
1202
1338
 
1339
+ /* ========================================
1340
+ Reset and Base Styles
1341
+ ======================================== */
1342
+ /* Webkit browsers (Chrome, Safari, Edge) */
1343
+ *::-webkit-scrollbar {
1344
+ width: 6px;
1345
+ height: 6px;
1346
+ }
1347
+
1348
+ *::-webkit-scrollbar-track {
1349
+ background: var(--pa-primary-bg);
1350
+ border-radius: 3px;
1351
+ }
1352
+
1353
+ *::-webkit-scrollbar-thumb {
1354
+ background: #e1e5e9;
1355
+ border-radius: 3px;
1356
+ border: 1px solid var(--pa-primary-bg);
1357
+ }
1358
+ *::-webkit-scrollbar-thumb:hover {
1359
+ background: #007bff;
1360
+ border-color: rgba(0, 123, 255, 0.12);
1361
+ }
1362
+ *::-webkit-scrollbar-thumb:active {
1363
+ background: rgba(0, 123, 255, 0.12);
1364
+ }
1365
+
1366
+ *::-webkit-scrollbar-corner {
1367
+ background: var(--pa-primary-bg);
1368
+ }
1369
+
1370
+ /* Firefox */
1371
+ * {
1372
+ scrollbar-width: thin;
1373
+ scrollbar-color: var(--pa-border-color) var(--pa-primary-bg);
1374
+ }
1375
+
1203
1376
  /* ========================================
1204
1377
  Layout V2 - Based on Testbench Structure
1205
1378
  ======================================== */
@@ -3473,8 +3646,8 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
3473
3646
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
3474
3647
  }
3475
3648
  .pa-card__header {
3476
- padding: 0.8rem 1.6rem;
3477
- min-height: 5rem;
3649
+ padding: 0.8rem 1rem;
3650
+ min-height: 4rem;
3478
3651
  border-top-left-radius: 8px;
3479
3652
  border-top-right-radius: 8px;
3480
3653
  border-bottom: 1px solid var(--pa-border-color);
@@ -3530,9 +3703,10 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
3530
3703
  color: var(--pa-text-primary);
3531
3704
  font-size: 1.6rem;
3532
3705
  font-weight: 600;
3706
+ line-height: 1;
3533
3707
  }
3534
3708
  .pa-card__body {
3535
- padding: 1.6rem 1.6rem 1.6rem 1.6rem;
3709
+ padding: 1.6rem 1rem;
3536
3710
  flex: 1;
3537
3711
  }
3538
3712
  .pa-card__body > :first-child {
@@ -3542,7 +3716,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
3542
3716
  padding: 0;
3543
3717
  }
3544
3718
  .pa-card__footer {
3545
- padding: 1.2rem 1.6rem;
3719
+ padding: 1.2rem 1rem;
3546
3720
  border-top: 1px solid var(--pa-border-color);
3547
3721
  border-bottom-left-radius: 8px;
3548
3722
  border-bottom-right-radius: 8px;
@@ -3633,7 +3807,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
3633
3807
  background: var(--pa-card-tabs-bg);
3634
3808
  }
3635
3809
  .pa-card__tab {
3636
- padding: 1.2rem 1.6rem;
3810
+ padding: 1.2rem 1rem;
3637
3811
  border: none;
3638
3812
  background: none;
3639
3813
  color: var(--pa-text-secondary);
@@ -3913,7 +4087,7 @@ a.pa-card p {
3913
4087
  .pa-tabs__container--bordered {
3914
4088
  border: 1px solid var(--pa-border-color);
3915
4089
  border-radius: 8px;
3916
- padding: 1.6rem;
4090
+ padding: 1.6rem 1rem;
3917
4091
  background-color: var(--pa-card-bg);
3918
4092
  }
3919
4093
  .pa-tabs__container--bordered .pa-tabs {
@@ -3936,7 +4110,7 @@ a.pa-card p {
3936
4110
  .pa-tabs__vertical-layout--bordered {
3937
4111
  border: 1px solid var(--pa-border-color);
3938
4112
  border-radius: 8px;
3939
- padding: 1.6rem;
4113
+ padding: 1.6rem 1rem;
3940
4114
  background-color: var(--pa-card-bg);
3941
4115
  }
3942
4116
  .pa-tabs__vertical-layout--bordered .pa-tabs--vertical {
@@ -4073,7 +4247,7 @@ a.pa-card p {
4073
4247
  font-size: 3.2rem;
4074
4248
  font-weight: 700;
4075
4249
  color: var(--pa-text-primary);
4076
- line-height: 1;
4250
+ line-height: 1.1;
4077
4251
  margin-bottom: 0.8rem;
4078
4252
  }
4079
4253
  .pa-stat--hero .pa-stat__change {
@@ -4110,7 +4284,7 @@ a.pa-card p {
4110
4284
  .pa-stat--square .pa-stat__number {
4111
4285
  font-size: clamp(4.8rem, 8vw, 7.2rem);
4112
4286
  font-weight: 700;
4113
- line-height: 1;
4287
+ line-height: 1.1;
4114
4288
  color: inherit;
4115
4289
  z-index: 2px;
4116
4290
  position: relative;
@@ -4122,7 +4296,7 @@ a.pa-card p {
4122
4296
  .pa-stat--square .pa-stat__symbol {
4123
4297
  font-size: clamp(6.4rem, 10vw, 9.6rem);
4124
4298
  font-weight: 700;
4125
- line-height: 1;
4299
+ line-height: 1.1;
4126
4300
  opacity: 0.12;
4127
4301
  color: inherit;
4128
4302
  position: absolute;
@@ -4312,7 +4486,7 @@ a.pa-card p {
4312
4486
  display: flex;
4313
4487
  align-items: center;
4314
4488
  gap: 1.2rem;
4315
- padding: 1.2rem 1.6rem;
4489
+ padding: 1.2rem 1rem;
4316
4490
  border-bottom: 1px solid var(--pa-border-color);
4317
4491
  }
4318
4492
  .pa-list__item:last-child {
@@ -4576,17 +4750,17 @@ a.pa-card p {
4576
4750
  color: #007bff;
4577
4751
  }
4578
4752
  .pa-composite-badge--primary .pa-composite-badge__label:hover {
4579
- background-color: rgba(0, 123, 255, 0.1);
4753
+ background-color: rgba(0, 123, 255, 0.12);
4580
4754
  }
4581
4755
  .pa-composite-badge--primary .pa-composite-badge__button {
4582
4756
  background-color: #007bff;
4583
4757
  color: #ffffff;
4584
4758
  }
4585
4759
  .pa-composite-badge--primary .pa-composite-badge__button:hover {
4586
- background-color: #0056b3;
4760
+ background-color: rgb(51, 149.4, 255);
4587
4761
  }
4588
4762
  .pa-composite-badge--primary .pa-composite-badge__button:focus {
4589
- box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
4763
+ box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
4590
4764
  }
4591
4765
  .pa-composite-badge--secondary .pa-composite-badge__icon {
4592
4766
  background-color: #6c757d;
@@ -4607,7 +4781,7 @@ a.pa-card p {
4607
4781
  background-color: #545b62;
4608
4782
  }
4609
4783
  .pa-composite-badge--secondary .pa-composite-badge__button:focus {
4610
- box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
4784
+ box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
4611
4785
  }
4612
4786
  .pa-composite-badge--success .pa-composite-badge__icon {
4613
4787
  background-color: #28a745;
@@ -4625,10 +4799,10 @@ a.pa-card p {
4625
4799
  color: #ffffff;
4626
4800
  }
4627
4801
  .pa-composite-badge--success .pa-composite-badge__button:hover {
4628
- background-color: #1e7e34;
4802
+ background-color: rgb(30.1449275362, 125.8550724638, 52);
4629
4803
  }
4630
4804
  .pa-composite-badge--success .pa-composite-badge__button:focus {
4631
- box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
4805
+ box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
4632
4806
  }
4633
4807
  .pa-composite-badge--danger .pa-composite-badge__icon {
4634
4808
  background-color: #dc3545;
@@ -4646,10 +4820,10 @@ a.pa-card p {
4646
4820
  color: #ffffff;
4647
4821
  }
4648
4822
  .pa-composite-badge--danger .pa-composite-badge__button:hover {
4649
- background-color: #c82333;
4823
+ background-color: rgb(189.2151898734, 32.7848101266, 47.7721518987);
4650
4824
  }
4651
4825
  .pa-composite-badge--danger .pa-composite-badge__button:focus {
4652
- box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
4826
+ box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
4653
4827
  }
4654
4828
  .pa-composite-badge--warning .pa-composite-badge__icon {
4655
4829
  background-color: #ffc107;
@@ -4667,10 +4841,10 @@ a.pa-card p {
4667
4841
  color: #212529;
4668
4842
  }
4669
4843
  .pa-composite-badge--warning .pa-composite-badge__button:hover {
4670
- background-color: #e0a800;
4844
+ background-color: rgb(211, 158.25, 0);
4671
4845
  }
4672
4846
  .pa-composite-badge--warning .pa-composite-badge__button:focus {
4673
- box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
4847
+ box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
4674
4848
  }
4675
4849
  .pa-composite-badge--info .pa-composite-badge__icon {
4676
4850
  background-color: #17a2b8;
@@ -4688,31 +4862,31 @@ a.pa-card p {
4688
4862
  color: #ffffff;
4689
4863
  }
4690
4864
  .pa-composite-badge--info .pa-composite-badge__button:hover {
4691
- background-color: #117a8b;
4865
+ background-color: rgb(17.3333333333, 122.0869565217, 138.6666666667);
4692
4866
  }
4693
4867
  .pa-composite-badge--info .pa-composite-badge__button:focus {
4694
- box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
4868
+ box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
4695
4869
  }
4696
4870
  .pa-composite-badge--light .pa-composite-badge__icon {
4697
4871
  background-color: #f8f9fa;
4698
- color: #495057;
4872
+ color: #2c3e50;
4699
4873
  }
4700
4874
  .pa-composite-badge--light .pa-composite-badge__label {
4701
4875
  background-color: #ffffff;
4702
- color: #495057;
4876
+ color: #2c3e50;
4703
4877
  }
4704
4878
  .pa-composite-badge--light .pa-composite-badge__label:hover {
4705
- background-color: #e2e6ea;
4879
+ background-color: #e9ecef;
4706
4880
  }
4707
4881
  .pa-composite-badge--light .pa-composite-badge__button {
4708
4882
  background-color: #f8f9fa;
4709
- color: #495057;
4883
+ color: #2c3e50;
4710
4884
  }
4711
4885
  .pa-composite-badge--light .pa-composite-badge__button:hover {
4712
- background-color: #e2e6ea;
4886
+ background-color: #e9ecef;
4713
4887
  }
4714
4888
  .pa-composite-badge--light .pa-composite-badge__button:focus {
4715
- box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
4889
+ box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
4716
4890
  }
4717
4891
  .pa-composite-badge--dark .pa-composite-badge__icon {
4718
4892
  background-color: #343a40;
@@ -4733,7 +4907,7 @@ a.pa-card p {
4733
4907
  background-color: #1d2124;
4734
4908
  }
4735
4909
  .pa-composite-badge--dark .pa-composite-badge__button:focus {
4736
- box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
4910
+ box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
4737
4911
  }
4738
4912
  .pa-composite-badge--primary .pa-composite-badge__icon {
4739
4913
  background-color: #007bff;
@@ -4756,7 +4930,7 @@ a.pa-card p {
4756
4930
  }
4757
4931
  .pa-composite-badge--light .pa-composite-badge__icon {
4758
4932
  background-color: #f8f9fa;
4759
- color: #495057;
4933
+ color: #2c3e50;
4760
4934
  }
4761
4935
  .pa-composite-badge--dark .pa-composite-badge__icon {
4762
4936
  background-color: #343a40;
@@ -4805,7 +4979,7 @@ a.pa-card p {
4805
4979
  }
4806
4980
  .pa-composite-badge--label-light .pa-composite-badge__label {
4807
4981
  background-color: rgb(253.95, 254.1, 254.25);
4808
- color: #495057;
4982
+ color: #2c3e50;
4809
4983
  }
4810
4984
  .pa-composite-badge--label-light .pa-composite-badge__label:hover {
4811
4985
  background-color: rgb(202.1566523605, 205.9613733906, 209.3433476395);
@@ -4821,7 +4995,7 @@ a.pa-card p {
4821
4995
  background-color: #007bff;
4822
4996
  }
4823
4997
  .pa-composite-badge--btn-primary .pa-composite-badge__button:hover {
4824
- background-color: #0056b3;
4998
+ background-color: rgb(51, 149.4, 255);
4825
4999
  }
4826
5000
  .pa-composite-badge--btn-primary .pa-composite-badge__button:focus {
4827
5001
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
@@ -4839,7 +5013,7 @@ a.pa-card p {
4839
5013
  background-color: #28a745;
4840
5014
  }
4841
5015
  .pa-composite-badge--btn-success .pa-composite-badge__button:hover {
4842
- background-color: #1e7e34;
5016
+ background-color: rgb(30.1449275362, 125.8550724638, 52);
4843
5017
  }
4844
5018
  .pa-composite-badge--btn-success .pa-composite-badge__button:focus {
4845
5019
  box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.25);
@@ -4849,7 +5023,7 @@ a.pa-card p {
4849
5023
  color: #212529;
4850
5024
  }
4851
5025
  .pa-composite-badge--btn-warning .pa-composite-badge__button:hover {
4852
- background-color: #e0a800;
5026
+ background-color: rgb(211, 158.25, 0);
4853
5027
  }
4854
5028
  .pa-composite-badge--btn-warning .pa-composite-badge__button:focus {
4855
5029
  box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.25);
@@ -4858,17 +5032,17 @@ a.pa-card p {
4858
5032
  background-color: #17a2b8;
4859
5033
  }
4860
5034
  .pa-composite-badge--btn-info .pa-composite-badge__button:hover {
4861
- background-color: #117a8b;
5035
+ background-color: rgb(17.3333333333, 122.0869565217, 138.6666666667);
4862
5036
  }
4863
5037
  .pa-composite-badge--btn-info .pa-composite-badge__button:focus {
4864
5038
  box-shadow: 0 0 0 2px rgba(23, 162, 184, 0.25);
4865
5039
  }
4866
5040
  .pa-composite-badge--btn-light .pa-composite-badge__button {
4867
5041
  background-color: #f8f9fa;
4868
- color: #495057;
5042
+ color: #2c3e50;
4869
5043
  }
4870
5044
  .pa-composite-badge--btn-light .pa-composite-badge__button:hover {
4871
- background-color: #e2e6ea;
5045
+ background-color: #e9ecef;
4872
5046
  }
4873
5047
  .pa-composite-badge--btn-light .pa-composite-badge__button:focus {
4874
5048
  box-shadow: 0 0 0 2px rgba(248, 249, 250, 0.25);
@@ -6080,7 +6254,7 @@ a.pa-card p {
6080
6254
  ======================================== */
6081
6255
  .pa-alert {
6082
6256
  position: relative;
6083
- padding: 1.2rem 1.6rem;
6257
+ padding: 1.2rem 1rem;
6084
6258
  margin-bottom: 1.6rem;
6085
6259
  border: 1px solid transparent;
6086
6260
  border-radius: 4px;
@@ -6165,11 +6339,11 @@ a.pa-card p {
6165
6339
  background-color: transparent;
6166
6340
  }
6167
6341
  .pa-alert--sm {
6168
- padding: 1.2rem 1.6rem;
6342
+ padding: 1.2rem 1rem;
6169
6343
  font-size: 1.4rem;
6170
6344
  }
6171
6345
  .pa-alert--lg {
6172
- padding: 1.2rem 1.6rem;
6346
+ padding: 1.2rem 1rem;
6173
6347
  font-size: 1.6rem;
6174
6348
  }
6175
6349
  .pa-alert--dismissible {
@@ -6203,7 +6377,7 @@ a.pa-card p {
6203
6377
  top: 0;
6204
6378
  right: 0;
6205
6379
  z-index: 2px;
6206
- padding: 1.2rem 1.6rem;
6380
+ padding: 1.2rem 1rem;
6207
6381
  background: none;
6208
6382
  border: none;
6209
6383
  font-size: 2rem;
@@ -6245,6 +6419,112 @@ a.pa-card p {
6245
6419
  border-top: 1px solid rgba(0, 0, 0, 0.1);
6246
6420
  }
6247
6421
 
6422
+ /* ========================================
6423
+ Reset and Base Styles
6424
+ ======================================== */
6425
+ /* ========================================
6426
+ Callout Components
6427
+ Documentation-style callouts with left border accent
6428
+ For tips, notes, warnings in content areas
6429
+ ======================================== */
6430
+ .pa-callout {
6431
+ position: relative;
6432
+ padding: 1.2rem 1rem;
6433
+ margin-bottom: 1.6rem;
6434
+ border-left: 0.4rem solid var(--pa-border-color);
6435
+ border-radius: 4px;
6436
+ font-size: 1.4rem;
6437
+ background-color: var(--pa-card-bg);
6438
+ }
6439
+ .pa-card__body .pa-callout:first-child {
6440
+ margin-top: 0;
6441
+ }
6442
+ .pa-card__body .pa-callout:last-child {
6443
+ margin-bottom: 0;
6444
+ }
6445
+ .pa-callout--primary {
6446
+ border-left-color: var(--pa-accent);
6447
+ background-color: rgba(0, 123, 255, 0.08);
6448
+ }
6449
+ .pa-callout--secondary {
6450
+ border-left-color: var(--pa-text-secondary);
6451
+ background-color: color-mix(in srgb, var(--pa-text-secondary) 5%, transparent);
6452
+ }
6453
+ .pa-callout--success {
6454
+ border-left-color: var(--pa-success-bg);
6455
+ background-color: var(--pa-success-bg-subtle);
6456
+ }
6457
+ .pa-callout--danger {
6458
+ border-left-color: var(--pa-danger-bg);
6459
+ background-color: var(--pa-danger-bg-subtle);
6460
+ }
6461
+ .pa-callout--warning {
6462
+ border-left-color: var(--pa-warning-bg);
6463
+ background-color: var(--pa-warning-bg-subtle);
6464
+ }
6465
+ .pa-callout--info {
6466
+ border-left-color: var(--pa-info-bg);
6467
+ background-color: var(--pa-info-bg-subtle);
6468
+ }
6469
+ .pa-callout--sm {
6470
+ padding: 0.8rem 1.2rem;
6471
+ font-size: 1.2rem;
6472
+ }
6473
+ .pa-callout--lg {
6474
+ padding: 2.4rem 3.2rem;
6475
+ font-size: 1.6rem;
6476
+ }
6477
+ .pa-callout__icon {
6478
+ float: left;
6479
+ margin-right: 0.8rem;
6480
+ font-size: 1.8rem;
6481
+ line-height: 1;
6482
+ }
6483
+ .pa-callout__heading {
6484
+ margin: 0 0 0.8rem 0;
6485
+ font-size: 1.6rem;
6486
+ font-weight: 600;
6487
+ }
6488
+ .pa-callout__content::after {
6489
+ content: "";
6490
+ display: table;
6491
+ clear: both;
6492
+ }
6493
+ .pa-callout > *:last-child {
6494
+ margin-bottom: 0;
6495
+ }
6496
+ .pa-callout p {
6497
+ margin: 0 0 0.8rem 0;
6498
+ }
6499
+ .pa-callout p:last-child {
6500
+ margin-bottom: 0;
6501
+ }
6502
+ .pa-callout ul, .pa-callout ol {
6503
+ margin: 0.8rem 0;
6504
+ padding-left: 2.4rem;
6505
+ }
6506
+ .pa-callout ul:last-child, .pa-callout ol:last-child {
6507
+ margin-bottom: 0;
6508
+ }
6509
+ .pa-callout code {
6510
+ background-color: rgba(0, 0, 0, 0.08);
6511
+ padding: 0.1em 0.3em;
6512
+ border-radius: 2px;
6513
+ font-size: 0.9em;
6514
+ }
6515
+ .pa-callout a {
6516
+ color: inherit;
6517
+ text-decoration: underline;
6518
+ font-weight: 500;
6519
+ }
6520
+ .pa-callout a:hover {
6521
+ text-decoration: none;
6522
+ }
6523
+ .pa-callout h1, .pa-callout h2, .pa-callout h3, .pa-callout h4, .pa-callout h5, .pa-callout h6 {
6524
+ color: inherit;
6525
+ margin-top: 0;
6526
+ }
6527
+
6248
6528
  /* ========================================
6249
6529
  Form Components
6250
6530
  Form groups, inputs, selects, textareas, checkboxes, radio buttons, states
@@ -7132,7 +7412,7 @@ web-daterangepicker {
7132
7412
  /* Colors */
7133
7413
  --drp-accent-color: #007bff;
7134
7414
  --drp-primary-bg: #007bff;
7135
- --drp-primary-bg-hover: #0056b3;
7415
+ --drp-primary-bg-hover: rgb(51, 149.4, 255);
7136
7416
  --drp-text-primary: var(--pa-text-primary);
7137
7417
  --drp-text-secondary: var(--pa-text-secondary);
7138
7418
  --drp-border-color: #e1e5e9;
@@ -7230,13 +7510,13 @@ web-daterangepicker {
7230
7510
  --drp-header-font-size: 1.6rem;
7231
7511
  --drp-header-font-weight: 600;
7232
7512
  --drp-header-text-color: var(--pa-text-primary);
7233
- --drp-header-bg-hover: rgba(0, 123, 255, 0.1);
7513
+ --drp-header-bg-hover: rgba(0, 123, 255, 0.12);
7234
7514
  --drp-header-bg-active: rgba(0, 123, 255, 0.05);
7235
7515
  /* ===== NAVIGATION ===== */
7236
7516
  --drp-nav-btn-size: 3.2rem; /* 32px (10px base) */
7237
7517
  --drp-nav-text-color: var(--pa-text-primary);
7238
7518
  --drp-nav-border-color: #e1e5e9;
7239
- --drp-nav-bg-hover: rgba(0, 123, 255, 0.1);
7519
+ --drp-nav-bg-hover: rgba(0, 123, 255, 0.12);
7240
7520
  --drp-nav-bg-active: rgba(0, 123, 255, 0.05);
7241
7521
  --drp-nav-border-hover: #007bff;
7242
7522
  /* ===== WEEKDAY HEADER ===== */
@@ -7250,7 +7530,7 @@ web-daterangepicker {
7250
7530
  --drp-day-border-radius: 2px;
7251
7531
  /* Day states */
7252
7532
  --drp-day-text-color: var(--pa-text-primary);
7253
- --drp-day-bg-hover: rgba(0, 123, 255, 0.1);
7533
+ --drp-day-bg-hover: rgba(0, 123, 255, 0.12);
7254
7534
  --drp-day-border-hover: transparent;
7255
7535
  /* Today indicator */
7256
7536
  --drp-day-today-border: #007bff;
@@ -7311,7 +7591,7 @@ web-daterangepicker {
7311
7591
  --drp-button-cancel-border: #e1e5e9;
7312
7592
  /* Apply button */
7313
7593
  --drp-button-apply-bg: #007bff;
7314
- --drp-button-apply-bg-hover: #0056b3;
7594
+ --drp-button-apply-bg-hover: rgb(51, 149.4, 255);
7315
7595
  --drp-button-apply-color: #ffffff;
7316
7596
  --drp-button-apply-border: #007bff;
7317
7597
  /* Button sizing */
@@ -7322,7 +7602,7 @@ web-daterangepicker {
7322
7602
  /* ===== UNIFIED NAVIGATION ===== */
7323
7603
  /* Range selectors in unified nav */
7324
7604
  --drp-unified-range-text-color: var(--pa-text-primary);
7325
- --drp-unified-range-bg-hover: rgba(0, 123, 255, 0.1);
7605
+ --drp-unified-range-bg-hover: rgba(0, 123, 255, 0.12);
7326
7606
  --drp-unified-range-bg-active: rgba(0, 123, 255, 0.05);
7327
7607
  /* Month/Year display */
7328
7608
  --drp-unified-month-color: var(--pa-text-primary);
@@ -7332,7 +7612,7 @@ web-daterangepicker {
7332
7612
  --drp-rolling-bg: var(--pa-card-bg);
7333
7613
  --drp-rolling-border: #e1e5e9;
7334
7614
  --drp-rolling-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
7335
- --drp-rolling-item-hover-bg: rgba(0, 123, 255, 0.1);
7615
+ --drp-rolling-item-hover-bg: rgba(0, 123, 255, 0.12);
7336
7616
  --drp-rolling-item-selected-bg: #007bff;
7337
7617
  --drp-rolling-item-selected-text: #ffffff;
7338
7618
  --drp-rolling-font-size: 1.4rem;
@@ -8594,18 +8874,6 @@ web-daterangepicker {
8594
8874
  }
8595
8875
  }
8596
8876
 
8597
- .text-success {
8598
- color: var(--pa-success-bg);
8599
- }
8600
-
8601
- .text-danger {
8602
- color: var(--pa-danger-bg);
8603
- }
8604
-
8605
- .text-warning {
8606
- color: var(--pa-warning-bg);
8607
- }
8608
-
8609
8877
  /* ========================================
8610
8878
  Reset and Base Styles
8611
8879
  ======================================== */
@@ -9053,12 +9321,15 @@ code {
9053
9321
  .pa-profile-panel__header {
9054
9322
  padding: 2.4rem;
9055
9323
  background-color: var(--pa-header-bg);
9056
- border-bottom: 1px solid var(--pa-border-color);
9324
+ border-bottom: 1px solid var(--pa-text-primary);
9057
9325
  display: flex;
9058
9326
  align-items: flex-start;
9059
9327
  gap: 1.6rem;
9060
9328
  position: relative;
9061
9329
  }
9330
+ .pa-profile-panel__header--no-avatar .pa-profile-panel__avatar {
9331
+ display: none;
9332
+ }
9062
9333
  .pa-profile-panel__avatar {
9063
9334
  width: 6.4rem;
9064
9335
  height: 6.4rem;
@@ -9076,12 +9347,16 @@ code {
9076
9347
  .pa-profile-panel__info {
9077
9348
  flex: 1;
9078
9349
  min-width: 0;
9350
+ padding-right: 3.2rem;
9079
9351
  }
9080
9352
  .pa-profile-panel__name {
9081
9353
  margin: 0 0 0.4rem 0;
9082
9354
  font-size: 1.8rem;
9083
9355
  font-weight: 600;
9084
9356
  color: var(--pa-text-primary);
9357
+ overflow: hidden;
9358
+ text-overflow: ellipsis;
9359
+ white-space: nowrap;
9085
9360
  }
9086
9361
  .pa-profile-panel__email {
9087
9362
  margin: 0 0 0.8rem 0;
@@ -9146,7 +9421,7 @@ code {
9146
9421
  display: flex;
9147
9422
  align-items: center;
9148
9423
  gap: 1.2rem;
9149
- padding: 1.2rem 1.6rem;
9424
+ padding: 0.8rem 1.6rem;
9150
9425
  color: var(--pa-text-primary);
9151
9426
  text-decoration: none;
9152
9427
  border-radius: 4px;
@@ -9162,7 +9437,7 @@ code {
9162
9437
  outline-offset: 2px;
9163
9438
  }
9164
9439
  .pa-profile-panel__nav-icon {
9165
- font-size: 1.8rem;
9440
+ font-size: 1.6rem;
9166
9441
  width: 2.4rem;
9167
9442
  text-align: center;
9168
9443
  }
@@ -9172,50 +9447,102 @@ code {
9172
9447
  gap: 1.2rem;
9173
9448
  margin-top: auto;
9174
9449
  }
9175
-
9176
- @media (max-width: 768px) {
9177
- .pa-profile-panel__content {
9178
- width: 85vw;
9179
- max-width: 40rem;
9180
- }
9181
- .pa-header__profile-name {
9182
- display: none;
9183
- }
9450
+ .pa-profile-panel__tabs {
9451
+ padding: 0 2.4rem;
9452
+ border-bottom: 1px solid var(--pa-border-color);
9453
+ background-color: var(--pa-header-bg);
9184
9454
  }
9185
- /* Webkit browsers (Chrome, Safari, Edge) */
9186
- *::-webkit-scrollbar {
9187
- width: 10px;
9188
- height: 10px;
9455
+ .pa-profile-panel__tabs .pa-tabs {
9456
+ border-bottom: none;
9457
+ margin-bottom: 0;
9189
9458
  }
9190
-
9191
- *::-webkit-scrollbar-track {
9192
- background: var(--pa-primary-bg);
9459
+ .pa-profile-panel__tabs .pa-tabs__item {
9460
+ color: var(--pa-header-text-secondary);
9461
+ border-bottom-color: transparent;
9462
+ }
9463
+ .pa-profile-panel__tabs .pa-tabs__item:hover {
9464
+ color: var(--pa-header-text);
9465
+ background-color: rgba(255, 255, 255, 0.1);
9466
+ }
9467
+ .pa-profile-panel__tabs .pa-tabs__item--active {
9468
+ color: var(--pa-header-text);
9469
+ border-bottom-color: var(--pa-accent);
9470
+ }
9471
+ .pa-profile-panel__favorites {
9472
+ display: flex;
9473
+ flex-direction: column;
9474
+ gap: 0.8rem;
9475
+ }
9476
+ .pa-profile-panel__favorites ul {
9477
+ list-style: none;
9478
+ margin: 0;
9479
+ padding: 0;
9480
+ }
9481
+ .pa-profile-panel__favorites li {
9482
+ margin-bottom: 0.8rem;
9483
+ }
9484
+ .pa-profile-panel__favorite-item {
9485
+ display: flex;
9486
+ align-items: center;
9487
+ gap: 1.2rem;
9488
+ padding: 0.8rem 1.6rem;
9489
+ color: var(--pa-text-primary);
9490
+ text-decoration: none;
9193
9491
  border-radius: 4px;
9492
+ cursor: pointer;
9493
+ transition: background-color 0.1s ease-out, color 0.1s ease-out;
9494
+ font-weight: 500;
9194
9495
  }
9195
-
9196
- *::-webkit-scrollbar-thumb {
9197
- background: #e1e5e9;
9496
+ .pa-profile-panel__favorite-item:hover {
9497
+ background-color: var(--pa-accent-light);
9498
+ color: var(--pa-accent);
9499
+ }
9500
+ .pa-profile-panel__favorite-item:focus {
9501
+ outline: 2px solid var(--pa-accent);
9502
+ outline-offset: 2px;
9503
+ }
9504
+ .pa-profile-panel__favorite-icon {
9505
+ font-size: 1.6rem;
9506
+ width: 2.4rem;
9507
+ text-align: center;
9508
+ }
9509
+ .pa-profile-panel__favorite-label {
9510
+ flex: 1;
9511
+ }
9512
+ .pa-profile-panel__favorite-remove {
9513
+ opacity: 0;
9514
+ margin-left: auto;
9515
+ background: none;
9516
+ border: none;
9517
+ padding: 0.8rem;
9518
+ color: var(--pa-text-secondary);
9519
+ cursor: pointer;
9198
9520
  border-radius: 4px;
9199
- border: 1px solid var(--pa-primary-bg);
9521
+ font-size: 1.4rem;
9522
+ line-height: 1;
9523
+ transition: opacity 0.1s ease-out, color 0.1s ease-out, background-color 0.1s ease-out;
9200
9524
  }
9201
- *::-webkit-scrollbar-thumb:hover {
9202
- background: #007bff;
9203
- border-color: rgba(0, 123, 255, 0.1);
9525
+ .pa-profile-panel__favorite-remove:hover {
9526
+ color: var(--pa-danger);
9527
+ background-color: var(--pa-danger-bg-light);
9204
9528
  }
9205
- *::-webkit-scrollbar-thumb:active {
9206
- background: rgba(0, 123, 255, 0.1);
9529
+ .pa-profile-panel__favorite-item:hover .pa-profile-panel__favorite-remove {
9530
+ opacity: 1;
9207
9531
  }
9208
-
9209
- *::-webkit-scrollbar-corner {
9210
- background: var(--pa-primary-bg);
9532
+ .pa-profile-panel__favorites-add {
9533
+ margin-top: auto;
9534
+ padding-top: 1.2rem;
9211
9535
  }
9212
9536
 
9213
- /* Firefox */
9214
- * {
9215
- scrollbar-width: auto;
9216
- scrollbar-color: var(--pa-border-color) var(--pa-primary-bg);
9537
+ @media (max-width: 768px) {
9538
+ .pa-profile-panel__content {
9539
+ width: 85vw;
9540
+ max-width: 40rem;
9541
+ }
9542
+ .pa-header__profile-name {
9543
+ display: none;
9544
+ }
9217
9545
  }
9218
-
9219
9546
  /* ========================================
9220
9547
  Reset and Base Styles
9221
9548
  ======================================== */
@@ -10832,7 +11159,7 @@ code {
10832
11159
  transition: color 0.1s ease-out;
10833
11160
  }
10834
11161
  .pa-notifications__mark-read:hover {
10835
- color: rgba(0, 123, 255, 0.1);
11162
+ color: rgba(0, 123, 255, 0.12);
10836
11163
  }
10837
11164
 
10838
11165
  .pa-notifications__list {
@@ -10939,7 +11266,7 @@ code {
10939
11266
  transition: color 0.1s ease-out;
10940
11267
  }
10941
11268
  .pa-notifications__footer a:hover {
10942
- color: rgba(0, 123, 255, 0.1);
11269
+ color: rgba(0, 123, 255, 0.12);
10943
11270
  }
10944
11271
 
10945
11272
  @media (max-width: 768px) {
@@ -11120,7 +11447,7 @@ code {
11120
11447
  box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.1);
11121
11448
  }
11122
11449
  .pa-settings-panel__toggle:hover {
11123
- background: rgba(0, 123, 255, 0.1);
11450
+ background: rgba(0, 123, 255, 0.12);
11124
11451
  width: 45px;
11125
11452
  right: 325px;
11126
11453
  }
@@ -11196,7 +11523,7 @@ code {
11196
11523
  right: 0;
11197
11524
  }
11198
11525
  .pa-settings-panel--open .pa-settings-panel__toggle {
11199
- background: rgba(0, 123, 255, 0.1);
11526
+ background: rgba(0, 123, 255, 0.12);
11200
11527
  transform: rotate(180deg);
11201
11528
  }
11202
11529
 
@@ -11502,6 +11829,170 @@ html.font-size-4xl {
11502
11829
  line-height: 1.8;
11503
11830
  }
11504
11831
 
11832
+ .gap-0 {
11833
+ gap: 0;
11834
+ }
11835
+
11836
+ .gap-xs {
11837
+ gap: 0.4rem;
11838
+ }
11839
+
11840
+ .gap-sm {
11841
+ gap: 0.8rem;
11842
+ }
11843
+
11844
+ .gap-md {
11845
+ gap: 1.2rem;
11846
+ }
11847
+
11848
+ .gap-base {
11849
+ gap: 1.6rem;
11850
+ }
11851
+
11852
+ .gap-lg {
11853
+ gap: 2.4rem;
11854
+ }
11855
+
11856
+ .gap-xl {
11857
+ gap: 3.2rem;
11858
+ }
11859
+
11860
+ .gap-2xl {
11861
+ gap: 4.8rem;
11862
+ }
11863
+
11864
+ .gap-1 {
11865
+ gap: 0.1rem;
11866
+ }
11867
+
11868
+ .gap-2 {
11869
+ gap: 0.2rem;
11870
+ }
11871
+
11872
+ .gap-3 {
11873
+ gap: 0.3rem;
11874
+ }
11875
+
11876
+ .gap-4 {
11877
+ gap: 0.4rem;
11878
+ }
11879
+
11880
+ .gap-5 {
11881
+ gap: 0.5rem;
11882
+ }
11883
+
11884
+ .gap-6 {
11885
+ gap: 0.6rem;
11886
+ }
11887
+
11888
+ .gap-8 {
11889
+ gap: 0.8rem;
11890
+ }
11891
+
11892
+ .gap-10 {
11893
+ gap: 1rem;
11894
+ }
11895
+
11896
+ .gap-12 {
11897
+ gap: 1.2rem;
11898
+ }
11899
+
11900
+ .gap-15 {
11901
+ gap: 1.5rem;
11902
+ }
11903
+
11904
+ .gap-20 {
11905
+ gap: 2rem;
11906
+ }
11907
+
11908
+ .row-gap-0 {
11909
+ row-gap: 0;
11910
+ }
11911
+
11912
+ .row-gap-xs {
11913
+ row-gap: 0.4rem;
11914
+ }
11915
+
11916
+ .row-gap-sm {
11917
+ row-gap: 0.8rem;
11918
+ }
11919
+
11920
+ .row-gap-md {
11921
+ row-gap: 1.2rem;
11922
+ }
11923
+
11924
+ .row-gap-base {
11925
+ row-gap: 1.6rem;
11926
+ }
11927
+
11928
+ .row-gap-lg {
11929
+ row-gap: 2.4rem;
11930
+ }
11931
+
11932
+ .column-gap-0 {
11933
+ column-gap: 0;
11934
+ }
11935
+
11936
+ .column-gap-xs {
11937
+ column-gap: 0.4rem;
11938
+ }
11939
+
11940
+ .column-gap-sm {
11941
+ column-gap: 0.8rem;
11942
+ }
11943
+
11944
+ .column-gap-md {
11945
+ column-gap: 1.2rem;
11946
+ }
11947
+
11948
+ .column-gap-base {
11949
+ column-gap: 1.6rem;
11950
+ }
11951
+
11952
+ .column-gap-lg {
11953
+ column-gap: 2.4rem;
11954
+ }
11955
+
11956
+ .text-2xs {
11957
+ font-size: 1rem;
11958
+ }
11959
+
11960
+ .text-xs {
11961
+ font-size: 1.2rem;
11962
+ }
11963
+
11964
+ .text-sm {
11965
+ font-size: 1.4rem;
11966
+ }
11967
+
11968
+ .text-md {
11969
+ font-size: 1.5rem;
11970
+ }
11971
+
11972
+ .text-base {
11973
+ font-size: 1.6rem;
11974
+ }
11975
+
11976
+ .text-lg {
11977
+ font-size: 1.8rem;
11978
+ }
11979
+
11980
+ .text-xl {
11981
+ font-size: 2rem;
11982
+ }
11983
+
11984
+ .text-2xl {
11985
+ font-size: 2.4rem;
11986
+ }
11987
+
11988
+ .text-3xl {
11989
+ font-size: 2.8rem;
11990
+ }
11991
+
11992
+ .text-4xl {
11993
+ font-size: 3.2rem;
11994
+ }
11995
+
11505
11996
  .component-showcase {
11506
11997
  display: flex;
11507
11998
  flex-wrap: wrap;