@aaravpos/appointment-booking-plugin 3.0.3 → 3.0.5

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/styles.css CHANGED
@@ -805,6 +805,11 @@
805
805
  .arravpos-m0 {
806
806
  margin: 0px !important;
807
807
  }
808
+ .aaravpos-center-items {
809
+ display: flex;
810
+ align-items: center;
811
+ justify-content: center;
812
+ }
808
813
  .aaravpos-overflow-hidden {
809
814
  overflow: hidden;
810
815
  }
@@ -840,6 +845,20 @@
840
845
  .aaravpos-mt-auto {
841
846
  margin-top: auto;
842
847
  }
848
+ .aaravpos-count {
849
+ position: absolute;
850
+ top: -5px;
851
+ left: -14px;
852
+ background: var(--btn-bg, #000);
853
+ color: var(--btn-text, #fff);
854
+ border-radius: 50%;
855
+ height: 22px;
856
+ width: 22px;
857
+ display: flex;
858
+ align-items: center;
859
+ justify-content: center;
860
+ font-size: 10px;
861
+ }
843
862
  .aaravpos-btn {
844
863
  gap: 8px;
845
864
  padding: 8px 16px;
@@ -864,10 +883,29 @@
864
883
  width: max-content;
865
884
  display: none;
866
885
  }
867
- .aaravpos-btn:hover {
886
+ .aaravpos-btn:hover, .aaravpos-form-btn:hover {
868
887
  background: var(--btn-bg-hover, #222);
869
888
  color: var(--btn-text-hover, #fff);
870
889
  }
890
+ .aaravpos-form-btn {
891
+ gap: 8px;
892
+ padding: 8px 16px;
893
+ border: none;
894
+ background: var(--btn-bg, #000);
895
+ color: var(--btn-text, #fff);
896
+ font-size: 12px;
897
+ font-weight: 700;
898
+ text-transform: uppercase;
899
+ letter-spacing: 1.5px;
900
+ cursor: pointer;
901
+ transition: all 0.2s ease;
902
+ border-radius: 6px;
903
+ display: flex;
904
+ align-items: center;
905
+ justify-content: center;
906
+ width: max-content;
907
+ margin-top: 22px;
908
+ }
871
909
  .aaravpos-divider {
872
910
  height: 1px;
873
911
  background: var(--border-color, #d4d4d4);
@@ -889,6 +927,37 @@
889
927
  .aaravpos-padding-btn {
890
928
  padding: 9px 8px !important;
891
929
  }
930
+ .aaravpos-cart-btn {
931
+ display: flex;
932
+ align-items: center;
933
+ justify-content: center;
934
+ height: 40px;
935
+ width: 40px;
936
+ border: 1px solid #e5e7eb;
937
+ background: #ffffff;
938
+ cursor: pointer;
939
+ outline: none;
940
+ flex-shrink: 0;
941
+ border-radius: 100%;
942
+ position: relative;
943
+ }
944
+ .aaravpos-count {
945
+ position: absolute;
946
+ top: -5px;
947
+ left: -14px;
948
+ background: var(--btn-bg);
949
+ @supports (color: color-mix(in lab, red, red)) {
950
+ background: color-mix(in srgb, var(--btn-bg) 80%, transparent);
951
+ }
952
+ color: var(--btn-text);
953
+ border-radius: 50%;
954
+ height: 22px;
955
+ width: 22px;
956
+ display: flex;
957
+ align-items: center;
958
+ justify-content: center;
959
+ font-size: 12px;
960
+ }
892
961
  .aaravpos-layout {
893
962
  height: 700px;
894
963
  display: flex;
@@ -945,10 +1014,9 @@
945
1014
  }
946
1015
  .aaravpos-sidebar {
947
1016
  flex-direction: column;
948
- background: var(--surface-bg, #ffffff);
1017
+ background: var(--surface-bg, #FFFFFF);
949
1018
  border: 1px solid rgba(0, 0, 0, 0.1);
950
1019
  padding: 16px 16px 14px;
951
- overflow: hidden;
952
1020
  position: fixed;
953
1021
  top: 10px;
954
1022
  right: 10px;
@@ -961,15 +1029,11 @@
961
1029
  border-radius: 8px;
962
1030
  display: flex;
963
1031
  }
964
- .aaravpos-sidebar.show {
1032
+ .aaravpos-sidebar.open {
965
1033
  transform: translateX(0);
966
1034
  }
967
- .aaravpos-sidebar.hide {
968
- transform: translateX(100%);
969
- }
970
1035
  .aaravpos-sidebar-mobile {
971
1036
  position: fixed;
972
- z-index: 999;
973
1037
  inset: 0;
974
1038
  height: 100vh;
975
1039
  background: #ffffff;
@@ -977,13 +1041,12 @@
977
1041
  display: flex;
978
1042
  flex-direction: column;
979
1043
  animation: aaravposFadeIn 0.25s ease;
1044
+ z-index: 999;
980
1045
  }
981
1046
  .aaravpos-sidebar-mobile-content {
982
1047
  flex: 1;
983
- position: fixed;
984
- inset: 0;
985
- padding: 16px;
986
1048
  overflow-y: auto;
1049
+ padding: 16px;
987
1050
  }
988
1051
  .aaravpos-outlet-divider {
989
1052
  width: 56px;
@@ -1171,7 +1234,7 @@
1171
1234
  display: flex;
1172
1235
  align-items: center;
1173
1236
  font-size: 20px;
1174
- margin-right: 8px;
1237
+ margin-right: 4px;
1175
1238
  cursor: pointer;
1176
1239
  border: none;
1177
1240
  background: transparent;
@@ -1384,6 +1447,31 @@
1384
1447
  .aaravpos-supercategory-btn.active .aaravpos-supercategory-count {
1385
1448
  color: #fff;
1386
1449
  }
1450
+ .aaravpos-subcategory-btn {
1451
+ min-width: fit-content;
1452
+ padding: 6px;
1453
+ border: 1px solid rgba(0, 0, 0, 0.3);
1454
+ background: #ffffff;
1455
+ text-align: left;
1456
+ cursor: pointer;
1457
+ transition: all 0.3s ease;
1458
+ font-size: 12px;
1459
+ border-radius: 4px;
1460
+ }
1461
+ .aaravpos-subcategory-btn:hover {
1462
+ border-color: rgba(0, 0, 0, 0.5);
1463
+ }
1464
+ .aaravpos-subcategory-btn.active {
1465
+ border: 1px solid var(--app-bg);
1466
+ background: var(--app-bg);
1467
+ @supports (color: color-mix(in lab, red, red)) {
1468
+ background: color-mix(in srgb, var(--app-bg) 10%, transparent);
1469
+ }
1470
+ color: var(--app-bg);
1471
+ }
1472
+ .aaravpos-subcategory-btn.active .aaravpos-subcategory-count {
1473
+ color: #fff;
1474
+ }
1387
1475
  .aaravpos-supercategory-title {
1388
1476
  margin-top: 0px;
1389
1477
  font-size: 14px;
@@ -1655,6 +1743,7 @@
1655
1743
  .aaravpos-order-header {
1656
1744
  padding: 0px 0px 8px 0px;
1657
1745
  border-bottom: 1px solid #d1d5db;
1746
+ position: relative;
1658
1747
  }
1659
1748
  .aaravpos-order-title {
1660
1749
  font-size: 16px;
@@ -1801,7 +1890,7 @@
1801
1890
  transition: all 0.2s ease;
1802
1891
  border-radius: 6px;
1803
1892
  }
1804
- .aaravpos-common-btn:hover {
1893
+ .aaravpos-common-btn:hover, .aaravpos-cart-btn:hover {
1805
1894
  background: var(--btn-bg-hover);
1806
1895
  color: var(--btn-text-hover, #ffffff);
1807
1896
  }
@@ -1977,15 +2066,21 @@
1977
2066
  font-weight: 500;
1978
2067
  }
1979
2068
  .aaravpos-sidebar-close-btn {
1980
- display: block;
1981
- width: auto;
1982
- padding: 2px 6px;
2069
+ width: 28px;
2070
+ height: 28px;
2071
+ padding: 4px;
1983
2072
  border: none;
1984
2073
  border-radius: 6px;
1985
2074
  background: transparent;
1986
2075
  cursor: pointer;
1987
- font-size: 30px;
2076
+ font-size: 20px;
1988
2077
  transition: all 0.2s ease;
2078
+ position: absolute;
2079
+ top: -4px;
2080
+ right: 0;
2081
+ display: flex;
2082
+ align-items: center;
2083
+ justify-content: center;
1989
2084
  }
1990
2085
  .aaravpos-sidebar-close-btn:hover {
1991
2086
  background: rgba(0, 0, 0, 0.05);
@@ -3416,7 +3511,7 @@
3416
3511
  margin-top: 14px;
3417
3512
  }
3418
3513
  .aaravpos-mobile-step-label {
3419
- font-size: 14px;
3514
+ font-size: 18px;
3420
3515
  }
3421
3516
  .aaravpos-outlet-card-title {
3422
3517
  font-size: 16px;
@@ -3597,11 +3692,14 @@
3597
3692
  .aaravpos-sidebar {
3598
3693
  display: block;
3599
3694
  }
3600
- .aaravpos-sidebar-close-btn {
3695
+ .aaravpos-layout-wrapper {
3696
+ grid-template-columns: minmax(0, 1fr) 360px;
3697
+ }
3698
+ .aaravpos-sidebar-mobile {
3601
3699
  display: none;
3602
3700
  }
3603
- .aaravpos-layout-wrapper.with-sidebar {
3604
- grid-template-columns: minmax(0, 1fr) 360px;
3701
+ .aaravpos-form-btn {
3702
+ display: none;
3605
3703
  }
3606
3704
  }
3607
3705
  @media (max-width: 991px) {
@@ -3661,6 +3759,9 @@
3661
3759
  flex-direction: column;
3662
3760
  margin-bottom: 10px;
3663
3761
  }
3762
+ .aaravpos-barber-sidebar {
3763
+ display: none;
3764
+ }
3664
3765
  .arravpos-booking-grid {
3665
3766
  flex-direction: column;
3666
3767
  gap: 20px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aaravpos/appointment-booking-plugin",
3
- "version": "3.0.3",
3
+ "version": "3.0.5",
4
4
  "description": "A React component library built with Tailwind CSS v4 and TypeScript",
5
5
  "type": "module",
6
6
  "packageManager": "pnpm@10.33.0",