@abstraks-dev/ui-library 1.1.29 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/dist/__tests__/Footer.test.js +57 -22
  2. package/dist/components/Footer.js +24 -36
  3. package/dist/components/Header.js +1 -1
  4. package/dist/components/SideMenu.js +28 -0
  5. package/dist/index.js +112 -0
  6. package/dist/styles/footer.css +109 -17
  7. package/dist/styles/footer.css.map +1 -1
  8. package/dist/styles/footer.scss +114 -23
  9. package/dist/styles/header.css +4 -3
  10. package/dist/styles/header.css.map +1 -1
  11. package/dist/styles/header.scss +15 -16
  12. package/dist/styles/main.css +140 -21
  13. package/dist/styles/main.css.map +1 -1
  14. package/dist/styles/search.css +5 -1
  15. package/dist/styles/search.css.map +1 -1
  16. package/dist/styles/search.scss +4 -1
  17. package/dist/styles/side-menu.css +22 -0
  18. package/dist/styles/side-menu.css.map +1 -1
  19. package/dist/styles/side-menu.scss +27 -0
  20. package/package.json +1 -1
package/dist/styles/footer.scss CHANGED
@@ -6,53 +6,144 @@
6
6
  flex-direction: row;
7
7
  padding: 15px;
8
8
 
9
+ /* Absolute positioning - reliably pins footer to bottom */
10
+ position: absolute;
11
+ bottom: 0;
12
+ left: 0;
13
+ right: 0;
14
+ background: #fff;
15
+ box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
16
+
17
+ /* Ensure footer stays above other content */
18
+ z-index: $z-index-sticky;
19
+
9
20
  .navigation {
10
- @media (min-width: 768px) {
11
- display: inline-flex;
12
- justify-content: flex-end;
13
- }
21
+ display: flex;
22
+ flex-direction: column;
14
23
 
15
24
  .unordered-list {
16
25
  display: flex;
17
26
  flex-direction: column;
27
+ width: 100%;
18
28
 
19
29
  @media (min-width: 768px) {
20
- display: inline-flex;
30
+ display: flex;
21
31
  flex-direction: row;
22
- align-items: center;
23
- justify-content: flex-end;
24
- padding: 0;
25
- margin: 0;
32
+ justify-content: space-between;
33
+ width: 50%;
26
34
  }
27
35
 
28
36
  &.auth-menu {
29
- border-top: 1px solid $gray-200;
30
37
  flex-direction: row;
31
38
  justify-content: space-between;
32
-
33
- .list-item {
34
- display: inline-flex;
35
- /* width: 25%; */
36
- }
37
- }
38
-
39
- .list-item {
40
39
  display: flex;
41
40
 
42
41
  @media (min-width: 768px) {
42
+ display: none;
43
+ }
44
+
45
+ .list-item {
43
46
  display: inline-flex;
44
- padding: 0 15px;
47
+ align-items: center;
48
+
49
+ @media (min-width: 768px) {
50
+ width: 33.3%;
51
+ }
45
52
  }
46
53
  }
47
54
  }
48
55
 
49
- .anchor {
56
+ .bottom {
57
+ display: flex;
58
+ flex-direction: row;
59
+ margin-top: 10px;
60
+ font-size: 0.875rem;
50
61
  color: $gray-600;
51
- text-decoration: none;
62
+ }
63
+
64
+ .list-item {
65
+ display: flex;
52
66
 
53
- &:hover {
54
- color: $color-font-body;
67
+ @media (min-width: 768px) {
68
+ display: inline-flex;
69
+ padding: 10px 0;
55
70
  }
56
71
  }
57
72
  }
73
+
74
+ .anchor {
75
+ color: $gray-600;
76
+ text-decoration: none;
77
+
78
+ &:hover {
79
+ color: $color-font-body;
80
+ }
81
+ }
82
+ }
83
+
84
+ /* Global styles to support absolute positioned footer */
85
+ /*
86
+ * Usage: Apply these classes to your layout:
87
+ * - Add 'sticky-footer-layout' class to your main container
88
+ * - Add 'main-content' class to your content wrapper
89
+ * - The footer will be absolutely positioned at the bottom
90
+ */
91
+ html.sticky-footer-layout,
92
+ body.sticky-footer-layout {
93
+ height: 100%;
94
+ margin: 0;
95
+ padding: 0;
96
+
97
+ /* Force proper height on mobile */
98
+ @media (max-width: 767px) {
99
+ height: 100%;
100
+ min-height: 100vh;
101
+ margin: 0;
102
+ padding: 0;
103
+ }
104
+ }
105
+
106
+ .sticky-footer-layout {
107
+ position: relative;
108
+ min-height: 100vh;
109
+ margin: 0;
110
+ padding: 0;
111
+
112
+ /* Add bottom padding to prevent content hiding behind footer */
113
+ padding-bottom: 80px; /* Adjust based on footer height */
114
+
115
+ /* Ensure layout works on all screen sizes */
116
+ @media (max-width: 767px) {
117
+ position: relative;
118
+ min-height: 100vh;
119
+ padding-bottom: 100px; /* Slightly more padding on mobile */
120
+ }
121
+
122
+ .main-content {
123
+ width: 100%;
124
+ padding-bottom: 20px; /* Additional content padding */
125
+
126
+ /* Mobile-specific main content */
127
+ @media (max-width: 767px) {
128
+ width: 100%;
129
+ padding-bottom: 20px;
130
+ }
131
+ }
132
+
133
+ /* Footer positioning within the layout */
134
+ .footer {
135
+ position: absolute;
136
+ bottom: 0;
137
+ left: 0;
138
+ right: 0;
139
+
140
+ /* Mobile-specific footer */
141
+ @media (max-width: 767px) {
142
+ position: absolute;
143
+ bottom: 0;
144
+ left: 0;
145
+ right: 0;
146
+ width: 100%;
147
+ }
148
+ }
58
149
  }
package/dist/styles/header.css CHANGED
@@ -139,8 +139,10 @@
139
139
  flex-direction: row;
140
140
  align-items: center;
141
141
  }
142
- .header .container-large .navigation {
143
- margin-left: auto;
142
+ @media (min-width: 768px) {
143
+ .header .container-large {
144
+ justify-content: space-between;
145
+ }
144
146
  }
145
147
  .header .container-mobile {
146
148
  width: 100%;
@@ -287,7 +289,6 @@
287
289
  @media (min-width: 768px) {
288
290
  .header .navigation .unordered-list .list-item {
289
291
  display: inline-flex;
290
- padding: 0 15px;
291
292
  }
292
293
  }
293
294
  .header .navigation .unordered-list .list-item [role=menuitem] {
package/dist/styles/header.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../src/styles/_variables.scss","../../src/styles/header.scss"],"names":[],"mappings":"AAgSA;EAJE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;;AC1RF;EACQ;EACA;EACA,SDqES;ECpET;EACA;EACA;EACA;EACA;EACA,kBDcM;ECbN;EACA;;AAGP;EACC;EACA;;AAID;EApBD;IAqBE;IACA;;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAIF;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC,kBDxBU;;AC4BV;EACC;EACA;EACA;EACA,kBDhCS;;ACkCT;EACC;;AAIF;EACC,kBDxCS;;AC+Cb;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACC;;AAGD;AAAA;EACC;EACA;;AAKD;EADD;IAEE;IACA;;;AAGD;EACC;EACA;;AAEA;EAJD;IAKE;IACA;IACA;IACA;IACA;IACA;;;AAGD;EACC;;AAEA;EAHD;IAIE;IACA;;;AAIA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;;AAGD;EACC;;AAGD;EACC;EACA,SDtEY;ECuEZ;EACA;EACA;EACA;EACA;EACA;EACA;EAGA,kBDhIO;ECiIP;EACA;EACA;EACA;EACA;;AAIA;EArBD;IAsBE;IACA;;;AAGD;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA,ODzJQ;EC0JR;EACA;;AAEA;EAEC;EACA,ODpLK;;ACuLN;EACC;EACA;;AAUR;EACC;;AAEA;EAHD;IAIE;IACA;;;AAID;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAMJ;EACC,ODzIQ;EC0IR;EACA;;AAEA;EACC,OD5Mc;;AC+Mf;EACC,ODpOY;ECqOZ;EACA;;AAID;EACC;IAEC,OD1NS;IC2NT;;;AAOJ;EA1PD;IA2PE;;EAEA;IACC;IACA;;;AAIF;EAnQD;IAoQE;;EAEA;IACC;;;AAKF;EACC;AAAA;AAAA;IAGC;IACA;IACA;;;;AAKH;EACQ;EACA","file":"header.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../src/styles/_variables.scss","../../src/styles/header.scss"],"names":[],"mappings":"AAgSA;EAJE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;;AC1RF;EACC;EACA;EACA,SDqEgB;ECpEhB;EACA;EACA;EACA;EACA;EACA,kBDca;ECbb;EACA;;AAGA;EACC;EACA;;AAID;EApBD;IAqBE;IACA;;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EAND;IAOE;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC,kBDxBU;;AC4BV;EACC;EACA;EACA;EACA,kBDhCS;;ACkCT;EACC;;AAIF;EACC,kBDxCS;;AC+Cb;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACC;;AAGD;AAAA;EACC;EACA;;AAKD;EADD;IAEE;IACA;;;AAGD;EACC;EACA;;AAEA;EAJD;IAKE;IACA;IACA;IACA;IACA;IACA;;;AAGD;EACC;;AAEA;EAHD;IAIE;IACA;;;AAIA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;;AAGD;EACC;;AAGD;EACC;EACA,SDtEY;ECuEZ;EACA;EACA;EACA;EACA;EACA;EACA;EAGA,kBDhIO;ECiIP;EACA;EACA;EACA;EACA;;AAIA;EArBD;IAsBE;IACA;;;AAGD;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA,ODzJQ;EC0JR;EACA;;AAEA;EAEC;EACA,ODpLK;;ACuLN;EACC;EACA;;AAUR;EACC;;AAEA;EAHD;IAIE;;;AAID;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAMJ;EACC,ODxIQ;ECyIR;EACA;;AAEA;EACC,OD3Mc;;AC8Mf;EACC,ODnOY;ECoOZ;EACA;;AAID;EACC;IAEC,ODzNS;IC0NT;;;AAOJ;EAzPD;IA0PE;;EAEA;IACC;IACA;;;AAIF;EAlQD;IAmQE;;EAEA;IACC;;;AAKF;EACC;AAAA;AAAA;IAGC;IACA;IACA;;;;AAKH;EACC;EACA","file":"header.css"}
package/dist/styles/header.scss CHANGED
@@ -1,17 +1,17 @@
1
1
  @use 'variables' as *;
2
2
 
3
3
  .header {
4
- position: sticky;
5
- top: 0;
6
- z-index: $z-index-sticky;
7
- width: 100%;
8
- display: flex;
9
- align-items: center;
10
- flex-direction: row;
11
- padding: 15px;
12
- background-color: $color-white;
13
- box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
14
- transition: transform 0.3s ease, opacity 0.3s ease;
4
+ position: sticky;
5
+ top: 0;
6
+ z-index: $z-index-sticky;
7
+ width: 100%;
8
+ display: flex;
9
+ align-items: center;
10
+ flex-direction: row;
11
+ padding: 15px;
12
+ background-color: $color-white;
13
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
14
+ transition: transform 0.3s ease, opacity 0.3s ease;
15
15
 
16
16
  // Improve focus indicators for accessibility
17
17
  *:focus {
@@ -31,8 +31,8 @@
31
31
  flex-direction: row;
32
32
  align-items: center;
33
33
 
34
- .navigation {
35
- margin-left: auto;
34
+ @media #{$medium} {
35
+ justify-content: space-between;
36
36
  }
37
37
  }
38
38
 
@@ -205,7 +205,6 @@
205
205
 
206
206
  @media #{$medium} {
207
207
  display: inline-flex;
208
- padding: 0 15px;
209
208
  }
210
209
 
211
210
  // Menu item styling
@@ -280,6 +279,6 @@
280
279
  }
281
280
 
282
281
  .header--hidden {
283
- transform: translateY(-100%);
284
- opacity: 0;
282
+ transform: translateY(-100%);
283
+ opacity: 0;
285
284
  }
package/dist/styles/main.css CHANGED
@@ -6122,53 +6122,145 @@
6122
6122
  align-items: center;
6123
6123
  flex-direction: row;
6124
6124
  padding: 15px;
6125
+ /* Absolute positioning - reliably pins footer to bottom */
6126
+ position: absolute;
6127
+ bottom: 0;
6128
+ left: 0;
6129
+ right: 0;
6130
+ background: #fff;
6131
+ box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
6132
+ /* Ensure footer stays above other content */
6133
+ z-index: 200;
6125
6134
  }
6126
- @media (min-width: 768px) {
6127
- .footer .navigation {
6128
- display: inline-flex;
6129
- justify-content: flex-end;
6130
- }
6135
+ .footer .navigation {
6136
+ display: flex;
6137
+ flex-direction: column;
6131
6138
  }
6132
6139
  .footer .navigation .unordered-list {
6133
6140
  display: flex;
6134
6141
  flex-direction: column;
6142
+ width: 100%;
6135
6143
  }
6136
6144
  @media (min-width: 768px) {
6137
6145
  .footer .navigation .unordered-list {
6138
- display: inline-flex;
6146
+ display: flex;
6139
6147
  flex-direction: row;
6140
- align-items: center;
6141
- justify-content: flex-end;
6142
- padding: 0;
6143
- margin: 0;
6148
+ justify-content: space-between;
6149
+ width: 50%;
6144
6150
  }
6145
6151
  }
6146
6152
  .footer .navigation .unordered-list.auth-menu {
6147
- border-top: 1px solid #e9ecef;
6148
6153
  flex-direction: row;
6149
6154
  justify-content: space-between;
6155
+ display: flex;
6156
+ }
6157
+ @media (min-width: 768px) {
6158
+ .footer .navigation .unordered-list.auth-menu {
6159
+ display: none;
6160
+ }
6150
6161
  }
6151
6162
  .footer .navigation .unordered-list.auth-menu .list-item {
6152
6163
  display: inline-flex;
6153
- /* width: 25%; */
6164
+ align-items: center;
6154
6165
  }
6155
- .footer .navigation .unordered-list .list-item {
6166
+ @media (min-width: 768px) {
6167
+ .footer .navigation .unordered-list.auth-menu .list-item {
6168
+ width: 33.3%;
6169
+ }
6170
+ }
6171
+ .footer .navigation .bottom {
6172
+ display: flex;
6173
+ flex-direction: row;
6174
+ margin-top: 10px;
6175
+ font-size: 0.875rem;
6176
+ color: #6c757d;
6177
+ }
6178
+ .footer .navigation .list-item {
6156
6179
  display: flex;
6157
6180
  }
6158
6181
  @media (min-width: 768px) {
6159
- .footer .navigation .unordered-list .list-item {
6182
+ .footer .navigation .list-item {
6160
6183
  display: inline-flex;
6161
- padding: 0 15px;
6184
+ padding: 10px 0;
6162
6185
  }
6163
6186
  }
6164
- .footer .navigation .anchor {
6187
+ .footer .anchor {
6165
6188
  color: #6c757d;
6166
6189
  text-decoration: none;
6167
6190
  }
6168
- .footer .navigation .anchor:hover {
6191
+ .footer .anchor:hover {
6169
6192
  color: #333;
6170
6193
  }
6171
6194
 
6195
+ /* Global styles to support absolute positioned footer */
6196
+ /*
6197
+ * Usage: Apply these classes to your layout:
6198
+ * - Add 'sticky-footer-layout' class to your main container
6199
+ * - Add 'main-content' class to your content wrapper
6200
+ * - The footer will be absolutely positioned at the bottom
6201
+ */
6202
+ html.sticky-footer-layout,
6203
+ body.sticky-footer-layout {
6204
+ height: 100%;
6205
+ margin: 0;
6206
+ padding: 0;
6207
+ /* Force proper height on mobile */
6208
+ }
6209
+ @media (max-width: 767px) {
6210
+ html.sticky-footer-layout,
6211
+ body.sticky-footer-layout {
6212
+ height: 100%;
6213
+ min-height: 100vh;
6214
+ margin: 0;
6215
+ padding: 0;
6216
+ }
6217
+ }
6218
+
6219
+ .sticky-footer-layout {
6220
+ position: relative;
6221
+ min-height: 100vh;
6222
+ margin: 0;
6223
+ padding: 0;
6224
+ /* Add bottom padding to prevent content hiding behind footer */
6225
+ padding-bottom: 80px; /* Adjust based on footer height */
6226
+ /* Ensure layout works on all screen sizes */
6227
+ /* Footer positioning within the layout */
6228
+ }
6229
+ @media (max-width: 767px) {
6230
+ .sticky-footer-layout {
6231
+ position: relative;
6232
+ min-height: 100vh;
6233
+ padding-bottom: 100px; /* Slightly more padding on mobile */
6234
+ }
6235
+ }
6236
+ .sticky-footer-layout .main-content {
6237
+ width: 100%;
6238
+ padding-bottom: 20px; /* Additional content padding */
6239
+ /* Mobile-specific main content */
6240
+ }
6241
+ @media (max-width: 767px) {
6242
+ .sticky-footer-layout .main-content {
6243
+ width: 100%;
6244
+ padding-bottom: 20px;
6245
+ }
6246
+ }
6247
+ .sticky-footer-layout .footer {
6248
+ position: absolute;
6249
+ bottom: 0;
6250
+ left: 0;
6251
+ right: 0;
6252
+ /* Mobile-specific footer */
6253
+ }
6254
+ @media (max-width: 767px) {
6255
+ .sticky-footer-layout .footer {
6256
+ position: absolute;
6257
+ bottom: 0;
6258
+ left: 0;
6259
+ right: 0;
6260
+ width: 100%;
6261
+ }
6262
+ }
6263
+
6172
6264
  .container {
6173
6265
  margin-right: auto;
6174
6266
  margin-left: auto;
@@ -6224,8 +6316,10 @@
6224
6316
  flex-direction: row;
6225
6317
  align-items: center;
6226
6318
  }
6227
- .header .container-large .navigation {
6228
- margin-left: auto;
6319
+ @media (min-width: 768px) {
6320
+ .header .container-large {
6321
+ justify-content: space-between;
6322
+ }
6229
6323
  }
6230
6324
  .header .container-mobile {
6231
6325
  width: 100%;
@@ -6372,7 +6466,6 @@
6372
6466
  @media (min-width: 768px) {
6373
6467
  .header .navigation .unordered-list .list-item {
6374
6468
  display: inline-flex;
6375
- padding: 0 15px;
6376
6469
  }
6377
6470
  }
6378
6471
  .header .navigation .unordered-list .list-item [role=menuitem] {
@@ -7714,6 +7807,11 @@ body.scroll-locked {
7714
7807
  position: relative;
7715
7808
  width: 100%;
7716
7809
  }
7810
+ @media (min-width: 768px) {
7811
+ .search-component {
7812
+ width: 40%;
7813
+ }
7814
+ }
7717
7815
  .search-component .search-input-container {
7718
7816
  position: relative;
7719
7817
  width: 100%;
@@ -7748,7 +7846,6 @@ body.scroll-locked {
7748
7846
  }
7749
7847
  @media (min-width: 768px) {
7750
7848
  .search-component .search-input-container .search-input-wrapper .animation {
7751
- width: 75%;
7752
7849
  display: inline-flex;
7753
7850
  justify-content: center;
7754
7851
  }
@@ -8201,6 +8298,11 @@ body.scroll-locked {
8201
8298
  visibility: hidden;
8202
8299
  z-index: 1000;
8203
8300
  position: fixed;
8301
+ /* iOS Safari fixed positioning fixes */
8302
+ -webkit-transform: translateZ(0);
8303
+ transform: translateZ(0);
8304
+ -webkit-backface-visibility: hidden;
8305
+ backface-visibility: hidden;
8204
8306
  }
8205
8307
  .side-menu .overlay {
8206
8308
  background-color: rgba(0, 0, 0, 0.5);
@@ -8260,6 +8362,10 @@ body.scroll-locked {
8260
8362
  overflow-x: hidden;
8261
8363
  background: #ffffff;
8262
8364
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
8365
+ /* Additional iOS Safari fixes */
8366
+ -webkit-transform: translateZ(0);
8367
+ transform: translateZ(0);
8368
+ will-change: transform;
8263
8369
  /* Mobile-first responsive design */
8264
8370
  }
8265
8371
  @media (min-width: 768px) {
@@ -8369,6 +8475,10 @@ body.scroll-locked {
8369
8475
  height: calc(100% - 60px);
8370
8476
  overflow-y: auto;
8371
8477
  flex: 1;
8478
+ /* iOS Safari smooth scrolling */
8479
+ -webkit-overflow-scrolling: touch;
8480
+ /* Prevent bounce scrolling on iOS */
8481
+ overscroll-behavior: contain;
8372
8482
  /* Custom scrollbar for better UX */
8373
8483
  }
8374
8484
  .side-menu .menu .wrapper-content::-webkit-scrollbar {
@@ -8484,6 +8594,15 @@ body.scroll-locked {
8484
8594
  border: 0 !important;
8485
8595
  }
8486
8596
 
8597
+ /* Body scroll lock when menu is open */
8598
+ body.side-menu-open {
8599
+ overflow: hidden;
8600
+ position: fixed;
8601
+ width: 100%;
8602
+ /* iOS Safari body scroll lock fixes */
8603
+ -webkit-overflow-scrolling: touch;
8604
+ }
8605
+
8487
8606
  /* ==========================================================================
8488
8607
  Tabs Component Styles
8489
8608
  ========================================================================== */