@keenmate/pure-admin-core 1.3.0 → 1.4.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 (39) hide show
  1. package/README.md +25 -1
  2. package/dist/css/main.css +892 -762
  3. package/package.json +6 -5
  4. package/src/scss/_core.scss +4 -0
  5. package/src/scss/_fonts.scss +1 -17
  6. package/src/scss/_rtl-helpers.scss +161 -0
  7. package/src/scss/core-components/_alerts.scss +3 -3
  8. package/src/scss/core-components/_base.scss +4 -3
  9. package/src/scss/core-components/_buttons.scss +9 -9
  10. package/src/scss/core-components/_callouts.scss +14 -9
  11. package/src/scss/core-components/_cards.scss +41 -0
  12. package/src/scss/core-components/_checkbox-lists.scss +6 -6
  13. package/src/scss/core-components/_code.scss +10 -10
  14. package/src/scss/core-components/_command-palette.scss +5 -14
  15. package/src/scss/core-components/_comparison.scss +3 -3
  16. package/src/scss/core-components/_data-display.scss +6 -6
  17. package/src/scss/core-components/_detail-panel.scss +43 -26
  18. package/src/scss/core-components/_file-selector.scss +2 -2
  19. package/src/scss/core-components/_grid.scss +13 -24
  20. package/src/scss/core-components/_lists.scss +12 -12
  21. package/src/scss/core-components/_modals.scss +2 -8
  22. package/src/scss/core-components/_pagers.scss +1 -1
  23. package/src/scss/core-components/_profile.scss +11 -6
  24. package/src/scss/core-components/_settings-panel.scss +22 -9
  25. package/src/scss/core-components/_tables.scss +76 -30
  26. package/src/scss/core-components/_tabs.scss +27 -14
  27. package/src/scss/core-components/_timeline.scss +5 -5
  28. package/src/scss/core-components/_toasts.scss +57 -21
  29. package/src/scss/core-components/_tooltips.scss +11 -6
  30. package/src/scss/core-components/_utilities.scss +80 -31
  31. package/src/scss/core-components/forms/_input-groups.scss +23 -22
  32. package/src/scss/core-components/forms/_input-wrapper.scss +3 -3
  33. package/src/scss/core-components/forms/_query-editor.scss +1 -1
  34. package/src/scss/core-components/layout/_layout-responsive.scss +3 -4
  35. package/src/scss/core-components/layout/_navbar-elements.scss +17 -6
  36. package/src/scss/core-components/layout/_navbar.scss +11 -22
  37. package/src/scss/core-components/layout/_sidebar-states.scss +25 -16
  38. package/src/scss/core-components/layout/_sidebar.scss +22 -16
  39. package/src/scss/variables/_system.scss +1 -0
package/src/scss/core-components/_utilities.scss CHANGED
@@ -5,45 +5,24 @@
5
5
  @use '../variables' as *;
6
6
 
7
7
  // Font size classes - Apply to <html> element for proportional scaling of all rem units
8
+ // These use absolute px values because rem would be calculated against browser default (16px),
9
+ // not the framework's 10px base. Scaling the html font-size scales all rem values proportionally.
8
10
  // Example: document.documentElement.classList.add('font-size-large');
9
- html.font-size-2xs {
10
- font-size: $font-size-2xs;
11
- }
12
-
13
- html.font-size-xs {
14
- font-size: $font-size-xs;
15
- }
16
11
 
17
12
  html.font-size-small {
18
- font-size: $font-size-sm;
19
- }
20
-
21
- html.font-size-medium {
22
- font-size: $font-size-md;
13
+ font-size: 9px; // ~14px body text (9 * 1.6 = 14.4px)
23
14
  }
24
15
 
25
16
  html.font-size-default {
26
- font-size: $font-size-base;
17
+ font-size: 10px; // 16px body text (default, same as html base)
27
18
  }
28
19
 
29
20
  html.font-size-large {
30
- font-size: $font-size-lg;
21
+ font-size: 11px; // ~18px body text (11 * 1.6 = 17.6px)
31
22
  }
32
23
 
33
24
  html.font-size-xlarge {
34
- font-size: $font-size-xl;
35
- }
36
-
37
- html.font-size-2xl {
38
- font-size: $font-size-2xl;
39
- }
40
-
41
- html.font-size-3xl {
42
- font-size: $font-size-3xl;
43
- }
44
-
45
- html.font-size-4xl {
46
- font-size: $font-size-4xl;
25
+ font-size: 12px; // ~19px body text (12 * 1.6 = 19.2px)
47
26
  }
48
27
 
49
28
  // Font family utilities
@@ -115,6 +94,24 @@ html.font-size-4xl {
115
94
  .max-h-40x { max-height: 40rem; } // 640px
116
95
  .max-h-50x { max-height: 50rem; } // 800px
117
96
 
97
+ // Percentage-based height utilities - for filling available space
98
+ .h-full { height: 100%; }
99
+ .h-screen { height: 100vh; }
100
+ .min-h-full { min-height: 100%; }
101
+ .min-h-screen { min-height: 100vh; }
102
+ .max-h-full { max-height: 100%; }
103
+ .max-h-screen { max-height: 100vh; }
104
+
105
+ // Flex utilities - for filling available space in flex containers
106
+ .flex-1 { flex: 1 1 0%; } // Grow and shrink equally, ignore content size
107
+ .flex-auto { flex: 1 1 auto; } // Grow and shrink, based on content size
108
+ .flex-initial { flex: 0 1 auto; } // Shrink but don't grow (default)
109
+ .flex-none { flex: none; } // Don't grow or shrink
110
+ .flex-grow { flex-grow: 1; } // Grow to fill space
111
+ .flex-grow-0 { flex-grow: 0; } // Don't grow
112
+ .flex-shrink { flex-shrink: 1; } // Allow shrinking
113
+ .flex-shrink-0 { flex-shrink: 0; } // Don't shrink
114
+
118
115
  // Overflow utilities - pair with height/max-height for scrollable content
119
116
  .overflow-auto { overflow: auto; }
120
117
  .overflow-y-auto { overflow-y: auto; }
@@ -139,6 +136,12 @@ html.font-size-4xl {
139
136
  overflow-x: overlay;
140
137
  }
141
138
 
139
+ // Scroll lock - prevents body scrolling when overlays are open
140
+ // Apply to <body> element via JavaScript
141
+ .pa-scroll-lock {
142
+ overflow: hidden !important;
143
+ }
144
+
142
145
  // Cursor utilities
143
146
  .cursor-pointer { cursor: pointer; }
144
147
  .cursor-help { cursor: help; }
@@ -186,17 +189,26 @@ html.font-size-4xl {
186
189
  color: var(--pa-text-color-2);
187
190
  }
188
191
 
189
- // Alignment modifiers
190
- &--left {
191
- text-align: left;
192
+ // Alignment modifiers (logical properties for RTL support)
193
+ &--start {
194
+ text-align: start; // RTL: flips to right
192
195
  }
193
196
 
194
197
  &--center {
195
198
  text-align: center;
196
199
  }
197
200
 
201
+ &--end {
202
+ text-align: end; // RTL: flips to left
203
+ }
204
+
205
+ // Legacy aliases for backward compatibility
206
+ &--left {
207
+ text-align: start;
208
+ }
209
+
198
210
  &--right {
199
- text-align: right;
211
+ text-align: end;
200
212
  }
201
213
 
202
214
  // Semantic variants (compound styles)
@@ -322,3 +334,40 @@ html.font-size-4xl {
322
334
  .pa-border-color-#{$i} { border-color: var(--pa-color-#{$i}); }
323
335
  }
324
336
 
337
+ // ========================================
338
+ // Logical Spacing Utilities (RTL-aware)
339
+ // ms = margin-inline-start, me = margin-inline-end
340
+ // ps = padding-inline-start, pe = padding-inline-end
341
+ // ========================================
342
+
343
+ // Margin inline-start (ms-*) - RTL: flips to margin-right
344
+ @each $name, $value in $semantic-spacers {
345
+ .ms-#{$name} { margin-inline-start: #{$value}; }
346
+ }
347
+ .ms-auto { margin-inline-start: auto; }
348
+
349
+ // Margin inline-end (me-*) - RTL: flips to margin-left
350
+ @each $name, $value in $semantic-spacers {
351
+ .me-#{$name} { margin-inline-end: #{$value}; }
352
+ }
353
+ .me-auto { margin-inline-end: auto; }
354
+
355
+ // Padding inline-start (ps-*) - RTL: flips to padding-right
356
+ @each $name, $value in $semantic-spacers {
357
+ .ps-#{$name} { padding-inline-start: #{$value}; }
358
+ }
359
+
360
+ // Padding inline-end (pe-*) - RTL: flips to padding-left
361
+ @each $name, $value in $semantic-spacers {
362
+ .pe-#{$name} { padding-inline-end: #{$value}; }
363
+ }
364
+
365
+ // Text alignment utilities (RTL-aware)
366
+ .text-start { text-align: start; } // RTL: flips to right
367
+ .text-center { text-align: center; }
368
+ .text-end { text-align: end; } // RTL: flips to left
369
+
370
+ // Legacy text alignment (maps to logical properties)
371
+ .text-left { text-align: start; }
372
+ .text-right { text-align: end; }
373
+
package/src/scss/core-components/forms/_input-groups.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  /* ========================================
2
2
  Input Groups
3
3
  Input groups with prepend/append addons and buttons
4
+ RTL-aware using CSS logical properties
4
5
  ======================================== */
5
6
  @use '../../variables' as *;
6
7
 
@@ -13,21 +14,21 @@
13
14
  flex: 1;
14
15
 
15
16
  &:first-child {
16
- border-top-left-radius: $border-radius;
17
- border-bottom-left-radius: $border-radius;
17
+ border-start-start-radius: $border-radius; // RTL: top-right in RTL
18
+ border-end-start-radius: $border-radius; // RTL: bottom-right in RTL
18
19
  }
19
20
 
20
21
  &:last-child {
21
- border-top-right-radius: $border-radius;
22
- border-bottom-right-radius: $border-radius;
22
+ border-start-end-radius: $border-radius; // RTL: top-left in RTL
23
+ border-end-end-radius: $border-radius; // RTL: bottom-left in RTL
23
24
  }
24
25
 
25
26
  &:not(:first-child) {
26
- border-left: none;
27
+ border-inline-start: none; // RTL: flips to border-right
27
28
  }
28
29
 
29
30
  &:not(:last-child) {
30
- border-right: none;
31
+ border-inline-end: none; // RTL: flips to border-left
31
32
  }
32
33
  }
33
34
 
@@ -48,11 +49,11 @@
48
49
  background-color: var(--pa-input-group-prepend-bg);
49
50
  color: var(--pa-input-group-prepend-text);
50
51
  border-color: var(--pa-input-group-prepend-bg);
51
- border-right: none;
52
+ border-inline-end: none; // RTL: flips to border-left
52
53
 
53
54
  &:first-child {
54
- border-top-left-radius: $border-radius;
55
- border-bottom-left-radius: $border-radius;
55
+ border-start-start-radius: $border-radius; // RTL: top-right in RTL
56
+ border-end-start-radius: $border-radius; // RTL: bottom-right in RTL
56
57
  }
57
58
  }
58
59
 
@@ -60,43 +61,43 @@
60
61
  background-color: var(--pa-input-group-append-bg);
61
62
  color: var(--pa-input-group-append-text);
62
63
  border-color: var(--pa-input-group-append-bg);
63
- border-left: none;
64
+ border-inline-start: none; // RTL: flips to border-right
64
65
 
65
66
  &:last-child {
66
- border-top-right-radius: $border-radius;
67
- border-bottom-right-radius: $border-radius;
67
+ border-start-end-radius: $border-radius; // RTL: top-left in RTL
68
+ border-end-end-radius: $border-radius; // RTL: bottom-left in RTL
68
69
  }
69
70
  }
70
71
 
71
72
  // Adjacent prepends/appends need borders between them
72
73
  &__prepend + &__prepend {
73
- border-left: $border-width-base solid var(--pa-input-group-prepend-bg);
74
+ border-inline-start: $border-width-base solid var(--pa-input-group-prepend-bg); // RTL: flips
74
75
  }
75
76
 
76
77
  &__append + &__append {
77
- border-left: $border-width-base solid var(--pa-input-group-append-bg);
78
+ border-inline-start: $border-width-base solid var(--pa-input-group-append-bg); // RTL: flips
78
79
  }
79
80
 
80
81
  // When input is focused, show focus border on adjacent prepend/append
81
82
  &:has(.pa-input:focus) {
82
83
  // Last prepend (one before input) gets focus border
83
84
  .pa-input-group__prepend {
84
- border-right: $border-width-base solid var(--pa-input-focus-border-color);
85
+ border-inline-end: $border-width-base solid var(--pa-input-focus-border-color); // RTL: flips
85
86
  }
86
87
 
87
88
  // But prepends followed by another prepend keep normal border
88
89
  .pa-input-group__prepend:has(+ .pa-input-group__prepend) {
89
- border-right: none;
90
+ border-inline-end: none; // RTL: flips
90
91
  }
91
92
 
92
93
  // First append (one after input) gets focus border
93
94
  .pa-input-group__append {
94
- border-left: $border-width-base solid var(--pa-input-focus-border-color);
95
+ border-inline-start: $border-width-base solid var(--pa-input-focus-border-color); // RTL: flips
95
96
  }
96
97
 
97
98
  // But appends following another append keep normal border
98
99
  .pa-input-group__append + .pa-input-group__append {
99
- border-left: $border-width-base solid var(--pa-border-color);
100
+ border-inline-start: $border-width-base solid var(--pa-border-color); // RTL: flips
100
101
  }
101
102
  }
102
103
 
@@ -104,13 +105,13 @@
104
105
  border-radius: 0;
105
106
 
106
107
  &:first-child {
107
- border-top-left-radius: $border-radius;
108
- border-bottom-left-radius: $border-radius;
108
+ border-start-start-radius: $border-radius; // RTL: top-right in RTL
109
+ border-end-start-radius: $border-radius; // RTL: bottom-right in RTL
109
110
  }
110
111
 
111
112
  &:last-child {
112
- border-top-right-radius: $border-radius;
113
- border-bottom-right-radius: $border-radius;
113
+ border-start-end-radius: $border-radius; // RTL: top-left in RTL
114
+ border-end-end-radius: $border-radius; // RTL: bottom-left in RTL
114
115
  }
115
116
  }
116
117
 
package/src/scss/core-components/forms/_input-wrapper.scss CHANGED
@@ -18,12 +18,12 @@
18
18
  .pa-virtual-textbox {
19
19
  flex: 1;
20
20
  min-width: 0; // Allow inputs to shrink below their content size
21
- padding-right: 4rem; // Make room for clear button
21
+ padding-inline-end: 4rem; // RTL: flips to padding-left, make room for clear button
22
22
  }
23
23
 
24
24
  &__clear {
25
25
  position: absolute;
26
- right: $spacing-xs;
26
+ inset-inline-end: $spacing-xs; // RTL: flips to left
27
27
  top: 50%;
28
28
  transform: translateY(-50%);
29
29
  background: transparent;
@@ -72,7 +72,7 @@
72
72
  }
73
73
 
74
74
  .pa-search-token-remove {
75
- margin-left: $spacing-xs;
75
+ margin-inline-start: $spacing-xs; // RTL: flips to margin-right
76
76
  padding: 0 $spacing-xs;
77
77
  border: none;
78
78
  background: transparent;
package/src/scss/core-components/forms/_query-editor.scss CHANGED
@@ -85,7 +85,7 @@
85
85
  }
86
86
 
87
87
  &-type {
88
- margin-left: auto;
88
+ margin-inline-start: auto; // RTL: flips to right
89
89
  font-size: $font-size-xs;
90
90
  color: var(--pa-text-color-2);
91
91
  opacity: 0.7;
package/src/scss/core-components/layout/_layout-responsive.scss CHANGED
@@ -12,7 +12,7 @@
12
12
  width: 0;
13
13
  opacity: 0;
14
14
  overflow: hidden;
15
- border-right: none;
15
+ border-inline-end: none; // RTL: flips to left
16
16
  }
17
17
 
18
18
  // Override icon-collapse mode on mobile - sidebar should be fully hidden
@@ -31,7 +31,7 @@
31
31
  .pa-layout__sidebar {
32
32
  position: fixed;
33
33
  top: $header-height;
34
- left: 0;
34
+ inset-inline-start: 0; // RTL: flips to right
35
35
  bottom: 0;
36
36
  width: $mobile-sidebar-width;
37
37
  z-index: 1050;
@@ -58,8 +58,7 @@
58
58
  content: "";
59
59
  position: fixed;
60
60
  top: $header-height;
61
- left: 0;
62
- right: 0;
61
+ inset-inline: 0; // RTL: covers full width
63
62
  bottom: 0;
64
63
  background-color: $mobile-backdrop-bg;
65
64
  z-index: 1040;
package/src/scss/core-components/layout/_navbar-elements.scss CHANGED
@@ -8,12 +8,12 @@
8
8
  .pa-header {
9
9
  &__burger {
10
10
  flex-shrink: 0;
11
- margin-left: $burger-menu-margin-left;
11
+ margin-inline-start: $burger-menu-margin-left; // RTL: flips to margin-right
12
12
  }
13
13
 
14
14
  &__brand {
15
15
  flex-shrink: 0;
16
- padding-left: $header-brand-padding-left;
16
+ padding-inline-start: $header-brand-padding-left; // RTL: flips to padding-right
17
17
 
18
18
  h1 {
19
19
  margin: 0;
@@ -92,7 +92,7 @@
92
92
  display: none !important; // Force hide by default
93
93
  position: absolute;
94
94
  top: 100%;
95
- left: 0;
95
+ inset-inline-start: 0; // RTL: flips to right: 0
96
96
  min-width: 19.2rem;
97
97
  background-color: var(--pa-card-bg);
98
98
  border: $border-width-base solid var(--pa-border-color);
@@ -114,7 +114,7 @@
114
114
  content: '';
115
115
  position: absolute;
116
116
  top: 0;
117
- left: 100%;
117
+ inset-inline-start: 100%; // RTL: flips to right: 100%
118
118
  width: 6.4px; // Small invisible bridge
119
119
  height: 100%;
120
120
  z-index: 1099;
@@ -145,9 +145,9 @@
145
145
  // Level 2 dropdown (nested)
146
146
  &--level2 {
147
147
  top: 0;
148
- left: 100%;
148
+ inset-inline-start: 100%; // RTL: flips to right: 100%
149
149
  margin-top: 0;
150
- margin-left: 0; // Remove gap to prevent dropdown from disappearing
150
+ margin-inline-start: 0; // RTL: flips to margin-right
151
151
  }
152
152
  }
153
153
 
@@ -207,6 +207,17 @@
207
207
  }
208
208
  }
209
209
 
210
+ // RTL: reverse X translation direction
211
+ [dir="rtl"] &.active {
212
+ span:nth-child(1) {
213
+ transform: rotate(45deg) translate(-$burger-transform-offset, $burger-transform-offset);
214
+ }
215
+
216
+ span:nth-child(3) {
217
+ transform: rotate(-45deg) translate(-$burger-transform-offset, -$burger-transform-offset);
218
+ }
219
+ }
220
+
210
221
  &:hover span {
211
222
  background-color: var(--pa-accent);
212
223
  }
package/src/scss/core-components/layout/_navbar.scss CHANGED
@@ -8,8 +8,7 @@
8
8
  .pa-navbar {
9
9
  position: fixed;
10
10
  top: 0;
11
- left: 0;
12
- right: 0;
11
+ inset-inline: 0; // RTL: works for both LTR and RTL
13
12
  height: $header-height;
14
13
  background-color: var(--pa-header-bg);
15
14
  border-bottom: $border-width-base solid var(--pa-header-border-color);
@@ -23,42 +22,32 @@
23
22
  // Body class is just a marker, no width styles on body itself
24
23
  body.pa-container-sm .pa-navbar {
25
24
  max-width: $layout-container-sm;
26
- left: 0;
27
- right: 0;
28
- margin-left: auto;
29
- margin-right: auto;
25
+ inset-inline: 0; // RTL: works for both LTR and RTL
26
+ margin-inline: auto; // RTL: centers in both directions
30
27
  }
31
28
 
32
29
  body.pa-container-md .pa-navbar {
33
30
  max-width: $layout-container-md;
34
- left: 0;
35
- right: 0;
36
- margin-left: auto;
37
- margin-right: auto;
31
+ inset-inline: 0;
32
+ margin-inline: auto;
38
33
  }
39
34
 
40
35
  body.pa-container-lg .pa-navbar {
41
36
  max-width: $layout-container-lg;
42
- left: 0;
43
- right: 0;
44
- margin-left: auto;
45
- margin-right: auto;
37
+ inset-inline: 0;
38
+ margin-inline: auto;
46
39
  }
47
40
 
48
41
  body.pa-container-xl .pa-navbar {
49
42
  max-width: $layout-container-xl;
50
- left: 0;
51
- right: 0;
52
- margin-left: auto;
53
- margin-right: auto;
43
+ inset-inline: 0;
44
+ margin-inline: auto;
54
45
  }
55
46
 
56
47
  body.pa-container-2xl .pa-navbar {
57
48
  max-width: $layout-container-2xl;
58
- left: 0;
59
- right: 0;
60
- margin-left: auto;
61
- margin-right: auto;
49
+ inset-inline: 0;
50
+ margin-inline: auto;
62
51
  }
63
52
 
64
53
  // Navbar inner content
package/src/scss/core-components/layout/_sidebar-states.scss CHANGED
@@ -10,7 +10,7 @@
10
10
  width: 0;
11
11
  opacity: 0;
12
12
  overflow: hidden;
13
- border-right: none;
13
+ border-inline-end: none; // RTL: flips to border-left
14
14
  }
15
15
 
16
16
  // Icon-collapse mode: show narrow icon-only bar when hidden
@@ -19,7 +19,7 @@
19
19
  opacity: 1; // Override parent opacity: 0 to make icons visible
20
20
  overflow: visible !important; // Allow flyout to show outside sidebar
21
21
  z-index: 1050; // Higher than content area (950) for flyouts
22
- border-right: $border-width-base solid $border-color; // Restore border
22
+ border-inline-end: $border-width-base solid $border-color; // RTL: flips to border-left
23
23
 
24
24
  // Enable positioning for flyouts
25
25
  .pa-sidebar__item {
@@ -64,14 +64,17 @@
64
64
  width: auto;
65
65
  overflow: visible; // Remove overflow hidden
66
66
  position: absolute;
67
- left: 100%;
67
+ inset-inline-start: 100%; // RTL: flips to right: 100%
68
68
  top: 0;
69
69
  bottom: 0;
70
70
  padding: $spacing-sm $spacing-base;
71
71
  background-color: var(--pa-sidebar-bg);
72
72
  border: $border-width-base solid var(--pa-border-color);
73
- border-left: none;
74
- border-radius: 0 $border-radius $border-radius 0;
73
+ border-inline-start: none; // RTL: flips to border-right: none
74
+ border-start-start-radius: 0;
75
+ border-start-end-radius: $border-radius;
76
+ border-end-end-radius: $border-radius;
77
+ border-end-start-radius: 0;
75
78
  box-shadow: $shadow-md;
76
79
  white-space: nowrap;
77
80
  z-index: 10; // Relative to parent
@@ -87,7 +90,7 @@
87
90
  max-height: none !important;
88
91
  overflow: visible !important;
89
92
  position: absolute;
90
- left: 100%;
93
+ inset-inline-start: 100%; // RTL: flips to right: 100%
91
94
  top: 0;
92
95
  min-width: 12rem;
93
96
  margin: 0;
@@ -95,8 +98,11 @@
95
98
  list-style: none;
96
99
  background-color: var(--pa-sidebar-submenu-bg);
97
100
  border: $border-width-base solid var(--pa-border-color);
98
- border-left: none;
99
- border-radius: 0 $border-radius $border-radius 0;
101
+ border-inline-start: none; // RTL: flips to border-right: none
102
+ border-start-start-radius: 0;
103
+ border-start-end-radius: $border-radius;
104
+ border-end-end-radius: $border-radius;
105
+ border-end-start-radius: 0;
100
106
  box-shadow: $shadow-md;
101
107
  z-index: 1001; // Higher than parent
102
108
 
@@ -140,8 +146,8 @@
140
146
 
141
147
  .pa-sidebar__chevron {
142
148
  display: inline;
143
- margin-left: auto;
144
- transform: none !important; // Always point right in flyout menus (never rotate down)
149
+ margin-inline-start: auto; // RTL: flips to margin-right: auto
150
+ transform: none !important; // Always point end direction in flyout menus
145
151
  }
146
152
 
147
153
  // Nested submenu flyout (level 3)
@@ -155,7 +161,7 @@
155
161
  max-height: none !important;
156
162
  overflow: visible !important;
157
163
  position: absolute;
158
- left: 100%;
164
+ inset-inline-start: 100%; // RTL: flips to right: 100%
159
165
  top: 0;
160
166
  min-width: 19.2rem;
161
167
  margin: 0;
@@ -163,8 +169,11 @@
163
169
  list-style: none;
164
170
  background-color: var(--pa-sidebar-submenu-bg);
165
171
  border: $border-width-base solid var(--pa-border-color);
166
- border-left: none;
167
- border-radius: 0 $border-radius $border-radius 0;
172
+ border-inline-start: none; // RTL: flips to border-right: none
173
+ border-start-start-radius: 0;
174
+ border-start-end-radius: $border-radius;
175
+ border-end-end-radius: $border-radius;
176
+ border-end-start-radius: 0;
168
177
  box-shadow: $shadow-md;
169
178
  z-index: 1002; // Higher than parent submenu
170
179
 
@@ -174,7 +183,7 @@
174
183
  }
175
184
 
176
185
  .pa-sidebar__chevron {
177
- transform: none !important; // Always point right in nested flyout menus
186
+ transform: none !important; // Always point end direction in nested flyout menus
178
187
  }
179
188
  }
180
189
  }
@@ -210,13 +219,13 @@ body:not(.sidebar-hidden) {
210
219
  // Restore submenu indentation for level 2
211
220
  .pa-sidebar__submenu > .pa-sidebar__item > .pa-sidebar__link,
212
221
  .pa-sidebar__submenu > .pa-sidebar__item > .pa-sidebar__toggle {
213
- padding-left: $sidebar-submenu-indent;
222
+ padding-inline-start: $sidebar-submenu-indent; // RTL: flips to padding-right
214
223
  }
215
224
 
216
225
  // Restore submenu indentation for level 3
217
226
  .pa-sidebar__submenu .pa-sidebar__submenu > .pa-sidebar__item > .pa-sidebar__link,
218
227
  .pa-sidebar__submenu .pa-sidebar__submenu > .pa-sidebar__item > .pa-sidebar__toggle {
219
- padding-left: calc($sidebar-submenu-indent * $sidebar-submenu-indent-multiplier);
228
+ padding-inline-start: calc($sidebar-submenu-indent * $sidebar-submenu-indent-multiplier); // RTL: flips
220
229
  }
221
230
 
222
231
  // Icon maintains same position in both states