@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.
- package/README.md +25 -1
- package/dist/css/main.css +892 -762
- package/package.json +6 -5
- package/src/scss/_core.scss +4 -0
- package/src/scss/_fonts.scss +1 -17
- package/src/scss/_rtl-helpers.scss +161 -0
- package/src/scss/core-components/_alerts.scss +3 -3
- package/src/scss/core-components/_base.scss +4 -3
- package/src/scss/core-components/_buttons.scss +9 -9
- package/src/scss/core-components/_callouts.scss +14 -9
- package/src/scss/core-components/_cards.scss +41 -0
- package/src/scss/core-components/_checkbox-lists.scss +6 -6
- package/src/scss/core-components/_code.scss +10 -10
- package/src/scss/core-components/_command-palette.scss +5 -14
- package/src/scss/core-components/_comparison.scss +3 -3
- package/src/scss/core-components/_data-display.scss +6 -6
- package/src/scss/core-components/_detail-panel.scss +43 -26
- package/src/scss/core-components/_file-selector.scss +2 -2
- package/src/scss/core-components/_grid.scss +13 -24
- package/src/scss/core-components/_lists.scss +12 -12
- package/src/scss/core-components/_modals.scss +2 -8
- package/src/scss/core-components/_pagers.scss +1 -1
- package/src/scss/core-components/_profile.scss +11 -6
- package/src/scss/core-components/_settings-panel.scss +22 -9
- package/src/scss/core-components/_tables.scss +76 -30
- package/src/scss/core-components/_tabs.scss +27 -14
- package/src/scss/core-components/_timeline.scss +5 -5
- package/src/scss/core-components/_toasts.scss +57 -21
- package/src/scss/core-components/_tooltips.scss +11 -6
- package/src/scss/core-components/_utilities.scss +80 -31
- package/src/scss/core-components/forms/_input-groups.scss +23 -22
- package/src/scss/core-components/forms/_input-wrapper.scss +3 -3
- package/src/scss/core-components/forms/_query-editor.scss +1 -1
- package/src/scss/core-components/layout/_layout-responsive.scss +3 -4
- package/src/scss/core-components/layout/_navbar-elements.scss +17 -6
- package/src/scss/core-components/layout/_navbar.scss +11 -22
- package/src/scss/core-components/layout/_sidebar-states.scss +25 -16
- package/src/scss/core-components/layout/_sidebar.scss +22 -16
- package/src/scss/variables/_system.scss +1 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@keenmate/pure-admin-core",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.1",
|
|
4
4
|
"description": "Lightweight, data-focused HTML/CSS admin framework built with PureCSS foundation and comprehensive component system",
|
|
5
5
|
"style": "dist/css/main.css",
|
|
6
6
|
"exports": {
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"components",
|
|
39
39
|
"ui-kit"
|
|
40
40
|
],
|
|
41
|
-
"author": "
|
|
41
|
+
"author": "KeenMate",
|
|
42
42
|
"license": "MIT",
|
|
43
43
|
"peerDependencies": {
|
|
44
44
|
"sass": "^1.0.0"
|
|
@@ -48,12 +48,13 @@
|
|
|
48
48
|
},
|
|
49
49
|
"repository": {
|
|
50
50
|
"type": "git",
|
|
51
|
-
"url": "git+https://github.com/pure-admin
|
|
51
|
+
"url": "git+https://github.com/KeenMate/pure-admin.git",
|
|
52
|
+
"directory": "packages/core"
|
|
52
53
|
},
|
|
53
54
|
"bugs": {
|
|
54
|
-
"url": "https://github.com/pure-admin/
|
|
55
|
+
"url": "https://github.com/KeenMate/pure-admin/issues"
|
|
55
56
|
},
|
|
56
|
-
"homepage": "https://github.com/pure-admin
|
|
57
|
+
"homepage": "https://github.com/KeenMate/pure-admin#readme",
|
|
57
58
|
"publishConfig": {
|
|
58
59
|
"access": "public"
|
|
59
60
|
}
|
package/src/scss/_core.scss
CHANGED
|
@@ -3,6 +3,10 @@
|
|
|
3
3
|
// Forward variables so they're available to files that @use this module
|
|
4
4
|
@forward 'variables/index';
|
|
5
5
|
|
|
6
|
+
// RTL (Right-to-Left) helper mixins
|
|
7
|
+
// Provides mixins for transforms, rotations, and complex positioning in RTL
|
|
8
|
+
@use 'rtl-helpers' as *;
|
|
9
|
+
|
|
6
10
|
/* ========================================
|
|
7
11
|
Component Imports
|
|
8
12
|
Each component is now in its own file for better maintainability
|
package/src/scss/_fonts.scss
CHANGED
|
@@ -1,23 +1,7 @@
|
|
|
1
1
|
/* Pure Admin Visual Framework - Default Font Definitions */
|
|
2
2
|
|
|
3
3
|
// Default framework fonts - themes can override these
|
|
4
|
-
|
|
5
|
-
// Font size classes
|
|
6
|
-
.font-size-small {
|
|
7
|
-
font-size: 14px;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
.font-size-default {
|
|
11
|
-
font-size: 16px;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.font-size-large {
|
|
15
|
-
font-size: 18px;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
.font-size-xlarge {
|
|
19
|
-
font-size: 20px;
|
|
20
|
-
}
|
|
4
|
+
// Note: Font size classes for <html> are in _utilities.scss (use px values for correct rem scaling)
|
|
21
5
|
|
|
22
6
|
// Font family classes with system defaults
|
|
23
7
|
.font-family-system {
|
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
// ============================================================================
|
|
2
|
+
// RTL (Right-to-Left) Helper Mixins
|
|
3
|
+
// ============================================================================
|
|
4
|
+
//
|
|
5
|
+
// These mixins help with cases where CSS logical properties don't fully apply,
|
|
6
|
+
// such as transforms, rotations, and complex positioning.
|
|
7
|
+
//
|
|
8
|
+
// RTL is activated by setting dir="rtl" on the <html> element:
|
|
9
|
+
// <html lang="ar" dir="rtl">
|
|
10
|
+
//
|
|
11
|
+
// Most directional CSS should use logical properties directly:
|
|
12
|
+
// margin-inline-start, padding-inline-end, inset-inline-start, etc.
|
|
13
|
+
//
|
|
14
|
+
// Use these mixins only for special cases like transforms and rotations.
|
|
15
|
+
// ============================================================================
|
|
16
|
+
|
|
17
|
+
/// Apply different transforms for LTR and RTL
|
|
18
|
+
/// @param {String} $ltr-value - Transform value for LTR
|
|
19
|
+
/// @param {String} $rtl-value - Transform value for RTL
|
|
20
|
+
@mixin rtl-transform($ltr-value, $rtl-value) {
|
|
21
|
+
transform: $ltr-value;
|
|
22
|
+
|
|
23
|
+
[dir="rtl"] & {
|
|
24
|
+
transform: $rtl-value;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
/// Apply different values for any property in LTR vs RTL
|
|
29
|
+
/// @param {String} $property - CSS property name
|
|
30
|
+
/// @param {*} $ltr-value - Value for LTR
|
|
31
|
+
/// @param {*} $rtl-value - Value for RTL
|
|
32
|
+
@mixin rtl-value($property, $ltr-value, $rtl-value) {
|
|
33
|
+
#{$property}: $ltr-value;
|
|
34
|
+
|
|
35
|
+
[dir="rtl"] & {
|
|
36
|
+
#{$property}: $rtl-value;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
/// Rotation that flips in RTL (for chevrons, arrows, etc.)
|
|
41
|
+
/// @param {Number} $ltr-deg - Rotation degrees for LTR
|
|
42
|
+
/// @param {Number} $rtl-deg [null] - Rotation degrees for RTL (defaults to negated $ltr-deg if null)
|
|
43
|
+
@mixin rtl-rotate($ltr-deg, $rtl-deg: null) {
|
|
44
|
+
transform: rotate($ltr-deg);
|
|
45
|
+
|
|
46
|
+
[dir="rtl"] & {
|
|
47
|
+
@if $rtl-deg != null {
|
|
48
|
+
transform: rotate($rtl-deg);
|
|
49
|
+
} @else {
|
|
50
|
+
transform: rotate(-1 * $ltr-deg);
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/// Horizontal flip for icons that should mirror in RTL
|
|
56
|
+
@mixin rtl-flip-horizontal {
|
|
57
|
+
[dir="rtl"] & {
|
|
58
|
+
transform: scaleX(-1);
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
/// RTL-only styles (only applied when dir="rtl")
|
|
63
|
+
@mixin rtl-only {
|
|
64
|
+
[dir="rtl"] & {
|
|
65
|
+
@content;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
/// LTR-only styles (only applied when dir="ltr" or no dir attribute)
|
|
70
|
+
@mixin ltr-only {
|
|
71
|
+
&:not([dir="rtl"] *) {
|
|
72
|
+
@content;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
[dir="ltr"] & {
|
|
76
|
+
@content;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
/// Translate that flips X direction in RTL
|
|
81
|
+
/// @param {Length} $x - X translation (positive = right in LTR, left in RTL)
|
|
82
|
+
/// @param {Length} $y [0] - Y translation
|
|
83
|
+
@mixin rtl-translate($x, $y: 0) {
|
|
84
|
+
transform: translate($x, $y);
|
|
85
|
+
|
|
86
|
+
[dir="rtl"] & {
|
|
87
|
+
transform: translate(-$x, $y);
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
/// TranslateX that flips in RTL
|
|
92
|
+
/// @param {Length} $x - X translation
|
|
93
|
+
@mixin rtl-translateX($x) {
|
|
94
|
+
transform: translateX($x);
|
|
95
|
+
|
|
96
|
+
[dir="rtl"] & {
|
|
97
|
+
transform: translateX(-$x);
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
/// Combined rotation and other transforms for RTL
|
|
102
|
+
/// Use when you need rotation + other transforms
|
|
103
|
+
/// @param {String} $ltr-transform - Full transform string for LTR
|
|
104
|
+
/// @param {String} $rtl-transform - Full transform string for RTL
|
|
105
|
+
@mixin rtl-transform-complex($ltr-transform, $rtl-transform) {
|
|
106
|
+
transform: $ltr-transform;
|
|
107
|
+
|
|
108
|
+
[dir="rtl"] & {
|
|
109
|
+
transform: $rtl-transform;
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
// ============================================================================
|
|
114
|
+
// Directional Border Radius Helper
|
|
115
|
+
// ============================================================================
|
|
116
|
+
// Use when you need different radius values for different corners
|
|
117
|
+
// For uniform radius, just use border-radius: $value (no direction needed)
|
|
118
|
+
|
|
119
|
+
/// Apply border radius with logical corner names
|
|
120
|
+
/// @param {Length} $start-start - Top-left in LTR, Top-right in RTL
|
|
121
|
+
/// @param {Length} $start-end - Top-right in LTR, Top-left in RTL
|
|
122
|
+
/// @param {Length} $end-end - Bottom-right in LTR, Bottom-left in RTL
|
|
123
|
+
/// @param {Length} $end-start - Bottom-left in LTR, Bottom-right in RTL
|
|
124
|
+
@mixin border-radius-logical($start-start, $start-end: $start-start, $end-end: $start-start, $end-start: $start-start) {
|
|
125
|
+
border-start-start-radius: $start-start;
|
|
126
|
+
border-start-end-radius: $start-end;
|
|
127
|
+
border-end-end-radius: $end-end;
|
|
128
|
+
border-end-start-radius: $end-start;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
/// Top corners only (start edge)
|
|
132
|
+
@mixin border-radius-top($radius) {
|
|
133
|
+
border-start-start-radius: $radius;
|
|
134
|
+
border-start-end-radius: $radius;
|
|
135
|
+
border-end-start-radius: 0;
|
|
136
|
+
border-end-end-radius: 0;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
/// Bottom corners only (end edge)
|
|
140
|
+
@mixin border-radius-bottom($radius) {
|
|
141
|
+
border-start-start-radius: 0;
|
|
142
|
+
border-start-end-radius: 0;
|
|
143
|
+
border-end-start-radius: $radius;
|
|
144
|
+
border-end-end-radius: $radius;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
/// Start side corners only (left in LTR, right in RTL)
|
|
148
|
+
@mixin border-radius-start($radius) {
|
|
149
|
+
border-start-start-radius: $radius;
|
|
150
|
+
border-end-start-radius: $radius;
|
|
151
|
+
border-start-end-radius: 0;
|
|
152
|
+
border-end-end-radius: 0;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
/// End side corners only (right in LTR, left in RTL)
|
|
156
|
+
@mixin border-radius-end($radius) {
|
|
157
|
+
border-start-end-radius: $radius;
|
|
158
|
+
border-end-end-radius: $radius;
|
|
159
|
+
border-start-start-radius: 0;
|
|
160
|
+
border-end-start-radius: 0;
|
|
161
|
+
}
|
|
@@ -119,7 +119,7 @@
|
|
|
119
119
|
|
|
120
120
|
// Dismissible alerts
|
|
121
121
|
&--dismissible {
|
|
122
|
-
padding-
|
|
122
|
+
padding-inline-end: $alert-dismissible-padding-right; // RTL: flips to padding-left
|
|
123
123
|
}
|
|
124
124
|
|
|
125
125
|
// Alert components
|
|
@@ -142,7 +142,7 @@
|
|
|
142
142
|
|
|
143
143
|
&__list {
|
|
144
144
|
margin: $spacing-sm 0;
|
|
145
|
-
padding-
|
|
145
|
+
padding-inline-start: $alert-list-padding-left; // RTL: flips to padding-right
|
|
146
146
|
}
|
|
147
147
|
|
|
148
148
|
&__actions {
|
|
@@ -154,7 +154,7 @@
|
|
|
154
154
|
&__close {
|
|
155
155
|
position: absolute;
|
|
156
156
|
top: 0;
|
|
157
|
-
|
|
157
|
+
inset-inline-end: 0; // RTL: flips to left
|
|
158
158
|
z-index: $focus-outline-width;
|
|
159
159
|
padding: $card-footer-padding-v $card-footer-padding-h;
|
|
160
160
|
background: none;
|
|
@@ -30,7 +30,8 @@ p {
|
|
|
30
30
|
// Lists - styled lists (default browser styling)
|
|
31
31
|
ul, ol {
|
|
32
32
|
margin: $list-margin-top 0 $list-margin-bottom 0;
|
|
33
|
-
padding: 0
|
|
33
|
+
padding: 0;
|
|
34
|
+
padding-inline-start: $list-padding-left; // RTL: flips to right
|
|
34
35
|
|
|
35
36
|
li {
|
|
36
37
|
margin-bottom: $list-item-margin-bottom;
|
|
@@ -40,7 +41,7 @@ ul, ol {
|
|
|
40
41
|
// Lists - unstyled (for navigation, etc.)
|
|
41
42
|
ul.unstyled, ol.unstyled {
|
|
42
43
|
list-style: none;
|
|
43
|
-
padding-
|
|
44
|
+
padding-inline-start: 0; // RTL: flips to right
|
|
44
45
|
|
|
45
46
|
li {
|
|
46
47
|
margin-bottom: 0;
|
|
@@ -61,7 +62,7 @@ dd {
|
|
|
61
62
|
// Blockquote
|
|
62
63
|
blockquote {
|
|
63
64
|
margin: $blockquote-margin-top 0 $blockquote-margin-bottom 0;
|
|
64
|
-
padding:
|
|
65
|
+
padding-inline-start: $blockquote-padding-left; // RTL: flips to right
|
|
65
66
|
}
|
|
66
67
|
|
|
67
68
|
// Pre/Code blocks
|
|
@@ -295,17 +295,17 @@
|
|
|
295
295
|
}
|
|
296
296
|
|
|
297
297
|
&__icon {
|
|
298
|
-
margin-
|
|
298
|
+
margin-inline-end: $btn-icon-margin; // RTL: flips to margin-left
|
|
299
299
|
|
|
300
300
|
&:last-child {
|
|
301
|
-
margin-
|
|
302
|
-
margin-
|
|
301
|
+
margin-inline-end: 0;
|
|
302
|
+
margin-inline-start: $btn-icon-margin; // RTL: flips to margin-right
|
|
303
303
|
}
|
|
304
304
|
}
|
|
305
305
|
|
|
306
|
-
// Buttons with icons align
|
|
306
|
+
// Buttons with icons align to start like sidebar menu items
|
|
307
307
|
&:has(.pa-btn__icon) {
|
|
308
|
-
text-align:
|
|
308
|
+
text-align: start; // RTL: flips to right
|
|
309
309
|
display: inline-flex;
|
|
310
310
|
align-items: center;
|
|
311
311
|
gap: $spacing-sm;
|
|
@@ -334,7 +334,7 @@
|
|
|
334
334
|
justify-content: flex-start;
|
|
335
335
|
|
|
336
336
|
.pa-btn__icon {
|
|
337
|
-
padding-
|
|
337
|
+
padding-inline-start: 0; // RTL: flips to padding-right
|
|
338
338
|
}
|
|
339
339
|
}
|
|
340
340
|
|
|
@@ -342,7 +342,7 @@
|
|
|
342
342
|
justify-content: flex-end;
|
|
343
343
|
|
|
344
344
|
.pa-btn__icon {
|
|
345
|
-
padding-
|
|
345
|
+
padding-inline-end: 0; // RTL: flips to padding-left
|
|
346
346
|
}
|
|
347
347
|
}
|
|
348
348
|
|
|
@@ -354,12 +354,12 @@
|
|
|
354
354
|
justify-content: space-between;
|
|
355
355
|
|
|
356
356
|
.pa-btn__icon:first-child {
|
|
357
|
-
padding-
|
|
357
|
+
padding-inline-start: 0; // RTL: flips to padding-right
|
|
358
358
|
}
|
|
359
359
|
|
|
360
360
|
// Remove padding from last element (text or icon)
|
|
361
361
|
> *:last-child {
|
|
362
|
-
padding-
|
|
362
|
+
padding-inline-end: 0; // RTL: flips to padding-left
|
|
363
363
|
}
|
|
364
364
|
}
|
|
365
365
|
}
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
position: relative;
|
|
11
11
|
padding: $card-footer-padding-v $card-footer-padding-h;
|
|
12
12
|
margin-bottom: $spacing-base;
|
|
13
|
-
border-
|
|
13
|
+
border-inline-start: $callout-border-width solid var(--pa-border-color); // RTL: flips to right
|
|
14
14
|
border-radius: $border-radius;
|
|
15
15
|
font-size: $font-size-sm;
|
|
16
16
|
background-color: var(--pa-card-bg);
|
|
@@ -25,32 +25,32 @@
|
|
|
25
25
|
|
|
26
26
|
// Callout variants
|
|
27
27
|
&--primary {
|
|
28
|
-
border-
|
|
28
|
+
border-inline-start-color: var(--pa-accent);
|
|
29
29
|
background-color: rgba($accent-color, $opacity-subtle);
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
&--secondary {
|
|
33
|
-
border-
|
|
33
|
+
border-inline-start-color: var(--pa-text-color-2);
|
|
34
34
|
background-color: color-mix(in srgb, var(--pa-text-color-2) 5%, transparent);
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
&--success {
|
|
38
|
-
border-
|
|
38
|
+
border-inline-start-color: var(--pa-success-bg);
|
|
39
39
|
background-color: var(--pa-success-bg-subtle);
|
|
40
40
|
}
|
|
41
41
|
|
|
42
42
|
&--danger {
|
|
43
|
-
border-
|
|
43
|
+
border-inline-start-color: var(--pa-danger-bg);
|
|
44
44
|
background-color: var(--pa-danger-bg-subtle);
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
&--warning {
|
|
48
|
-
border-
|
|
48
|
+
border-inline-start-color: var(--pa-warning-bg);
|
|
49
49
|
background-color: var(--pa-warning-bg-subtle);
|
|
50
50
|
}
|
|
51
51
|
|
|
52
52
|
&--info {
|
|
53
|
-
border-
|
|
53
|
+
border-inline-start-color: var(--pa-info-bg);
|
|
54
54
|
background-color: var(--pa-info-bg-subtle);
|
|
55
55
|
}
|
|
56
56
|
|
|
@@ -68,7 +68,12 @@
|
|
|
68
68
|
// Callout components
|
|
69
69
|
&__icon {
|
|
70
70
|
float: left;
|
|
71
|
-
margin-
|
|
71
|
+
margin-inline-end: $spacing-sm; // RTL: flips to margin-left
|
|
72
|
+
|
|
73
|
+
[dir="rtl"] & {
|
|
74
|
+
float: right;
|
|
75
|
+
}
|
|
76
|
+
|
|
72
77
|
font-size: $font-size-lg;
|
|
73
78
|
line-height: 1;
|
|
74
79
|
}
|
|
@@ -105,7 +110,7 @@
|
|
|
105
110
|
// Lists inside callouts
|
|
106
111
|
ul, ol {
|
|
107
112
|
margin: $spacing-sm 0;
|
|
108
|
-
padding-
|
|
113
|
+
padding-inline-start: $spacing-lg; // RTL: flips to right
|
|
109
114
|
|
|
110
115
|
&:last-child {
|
|
111
116
|
margin-bottom: 0;
|
|
@@ -29,6 +29,7 @@
|
|
|
29
29
|
display: flex;
|
|
30
30
|
justify-content: space-between;
|
|
31
31
|
align-items: center;
|
|
32
|
+
gap: $spacing-base; // Gap between header elements (title, description, actions)
|
|
32
33
|
min-width: 0; // Enable text truncation
|
|
33
34
|
|
|
34
35
|
// Reset margins/paddings for all native elements
|
|
@@ -61,10 +62,50 @@
|
|
|
61
62
|
font-size: $font-size-base;
|
|
62
63
|
}
|
|
63
64
|
|
|
65
|
+
// Direct heading children - don't shrink (for three-part layout)
|
|
66
|
+
> h1,
|
|
67
|
+
> h2,
|
|
68
|
+
> h3,
|
|
69
|
+
> h4,
|
|
70
|
+
> h5,
|
|
71
|
+
> h6 {
|
|
72
|
+
flex-shrink: 0;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
// Description paragraphs - flexible middle, truncate with ellipsis
|
|
76
|
+
> p {
|
|
77
|
+
flex: 1;
|
|
78
|
+
min-width: 0;
|
|
79
|
+
overflow: hidden;
|
|
80
|
+
text-overflow: ellipsis;
|
|
81
|
+
white-space: nowrap;
|
|
82
|
+
color: var(--pa-text-color-2);
|
|
83
|
+
font-size: $font-size-sm;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
// Actions container - fixed, doesn't shrink
|
|
87
|
+
.pa-card__actions,
|
|
88
|
+
.pa-btn-group {
|
|
89
|
+
flex-shrink: 0;
|
|
90
|
+
}
|
|
91
|
+
|
|
64
92
|
// Buttons in card headers - negative margin to prevent header height growth
|
|
65
93
|
.pa-btn {
|
|
66
94
|
margin-top: -0.25rem;
|
|
67
95
|
margin-bottom: -0.25rem;
|
|
96
|
+
flex-shrink: 0;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
// Wrap modifier - allow description to wrap (for mobile or long descriptions)
|
|
100
|
+
&--wrap {
|
|
101
|
+
flex-wrap: wrap;
|
|
102
|
+
|
|
103
|
+
> p {
|
|
104
|
+
white-space: normal;
|
|
105
|
+
flex-basis: 100%;
|
|
106
|
+
order: 1;
|
|
107
|
+
margin-top: $spacing-xs;
|
|
108
|
+
}
|
|
68
109
|
}
|
|
69
110
|
}
|
|
70
111
|
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
|
|
42
42
|
// When using .pa-checkbox component inside label
|
|
43
43
|
.pa-checkbox {
|
|
44
|
-
margin-
|
|
44
|
+
margin-inline-end: $spacing-md; // RTL: flips to left
|
|
45
45
|
|
|
46
46
|
// Reset gap since label already provides spacing
|
|
47
47
|
gap: 0;
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
// New pattern uses .pa-checkbox component inside .pa-checkbox-list__label
|
|
53
53
|
&__checkbox {
|
|
54
54
|
margin: 0;
|
|
55
|
-
margin-
|
|
55
|
+
margin-inline-end: $spacing-md; // RTL: flips to left
|
|
56
56
|
width: $spinner-size;
|
|
57
57
|
height: $spinner-size;
|
|
58
58
|
cursor: pointer;
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
// Optional action buttons (outside label, positioned absolutely)
|
|
76
76
|
&__actions {
|
|
77
77
|
position: absolute;
|
|
78
|
-
|
|
78
|
+
inset-inline-end: $spacing-md; // RTL: flips to left
|
|
79
79
|
top: 50%;
|
|
80
80
|
transform: translateY(-50%);
|
|
81
81
|
display: flex;
|
|
@@ -93,7 +93,7 @@
|
|
|
93
93
|
|
|
94
94
|
// When item has actions, add padding to label to prevent text overlap
|
|
95
95
|
&__item:has(.pa-checkbox-list__actions) &__label {
|
|
96
|
-
padding-
|
|
96
|
+
padding-inline-end: 6rem; // RTL: flips to left - Adjust based on number of action buttons
|
|
97
97
|
}
|
|
98
98
|
}
|
|
99
99
|
|
|
@@ -229,7 +229,7 @@
|
|
|
229
229
|
|
|
230
230
|
.pa-checkbox-list__item {
|
|
231
231
|
&:nth-child(odd) {
|
|
232
|
-
border-
|
|
232
|
+
border-inline-end: $border-width-base solid var(--pa-border-color); // RTL: flips to left
|
|
233
233
|
}
|
|
234
234
|
}
|
|
235
235
|
}
|
|
@@ -242,7 +242,7 @@
|
|
|
242
242
|
|
|
243
243
|
.pa-checkbox-list__item {
|
|
244
244
|
&:not(:nth-child(3n)) {
|
|
245
|
-
border-
|
|
245
|
+
border-inline-end: $border-width-base solid var(--pa-border-color); // RTL: flips to left
|
|
246
246
|
}
|
|
247
247
|
}
|
|
248
248
|
}
|
|
@@ -29,18 +29,18 @@ code {
|
|
|
29
29
|
// With line numbers
|
|
30
30
|
&--numbered {
|
|
31
31
|
counter-reset: line;
|
|
32
|
-
padding-
|
|
32
|
+
padding-inline-start: 5.6rem; // RTL: flips to right
|
|
33
33
|
position: relative;
|
|
34
34
|
|
|
35
35
|
&::before {
|
|
36
36
|
content: '';
|
|
37
37
|
position: absolute;
|
|
38
|
-
|
|
38
|
+
inset-inline-start: 0; // RTL: flips to right
|
|
39
39
|
top: 0;
|
|
40
40
|
bottom: 0;
|
|
41
41
|
width: 4.4rem;
|
|
42
42
|
background-color: rgba(0, 0, 0, 0.05);
|
|
43
|
-
border-
|
|
43
|
+
border-inline-end: $border-width-base solid var(--pa-border-color); // RTL: flips to left
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
46
|
|
|
@@ -52,31 +52,31 @@ code {
|
|
|
52
52
|
|
|
53
53
|
// Language variants with colored accents
|
|
54
54
|
&--json {
|
|
55
|
-
border-
|
|
55
|
+
border-inline-start: $border-width-medium solid $code-language-json; // RTL: flips to right
|
|
56
56
|
}
|
|
57
57
|
|
|
58
58
|
&--javascript {
|
|
59
|
-
border-
|
|
59
|
+
border-inline-start: $border-width-medium solid $code-language-javascript; // RTL: flips to right
|
|
60
60
|
}
|
|
61
61
|
|
|
62
62
|
&--html {
|
|
63
|
-
border-
|
|
63
|
+
border-inline-start: $border-width-medium solid $code-language-html; // RTL: flips to right
|
|
64
64
|
}
|
|
65
65
|
|
|
66
66
|
&--css {
|
|
67
|
-
border-
|
|
67
|
+
border-inline-start: $border-width-medium solid $code-language-css; // RTL: flips to right
|
|
68
68
|
}
|
|
69
69
|
|
|
70
70
|
&--bash {
|
|
71
|
-
border-
|
|
71
|
+
border-inline-start: $border-width-medium solid $code-language-bash; // RTL: flips to right
|
|
72
72
|
}
|
|
73
73
|
|
|
74
74
|
&--sql {
|
|
75
|
-
border-
|
|
75
|
+
border-inline-start: $border-width-medium solid $code-language-sql; // RTL: flips to right
|
|
76
76
|
}
|
|
77
77
|
|
|
78
78
|
&--python {
|
|
79
|
-
border-
|
|
79
|
+
border-inline-start: $border-width-medium solid $code-language-python; // RTL: flips to right
|
|
80
80
|
}
|
|
81
81
|
}
|
|
82
82
|
|
|
@@ -6,10 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
.pa-command-palette {
|
|
8
8
|
position: fixed;
|
|
9
|
-
|
|
10
|
-
left: 0;
|
|
11
|
-
right: 0;
|
|
12
|
-
bottom: 0;
|
|
9
|
+
inset: 0; // RTL: full screen works in both directions
|
|
13
10
|
z-index: $z-index-command-palette;
|
|
14
11
|
display: none;
|
|
15
12
|
align-items: flex-start;
|
|
@@ -23,10 +20,7 @@
|
|
|
23
20
|
// Backdrop overlay
|
|
24
21
|
&__backdrop {
|
|
25
22
|
position: absolute;
|
|
26
|
-
|
|
27
|
-
left: 0;
|
|
28
|
-
right: 0;
|
|
29
|
-
bottom: 0;
|
|
23
|
+
inset: 0; // RTL: full screen works in both directions
|
|
30
24
|
background-color: var(--pa-command-palette-backdrop-bg);
|
|
31
25
|
backdrop-filter: blur($command-palette-backdrop-blur);
|
|
32
26
|
animation: fadeIn $transition-normal $easing-smooth;
|
|
@@ -65,7 +59,7 @@
|
|
|
65
59
|
|
|
66
60
|
// Remove button inside badge
|
|
67
61
|
&__remove {
|
|
68
|
-
margin-
|
|
62
|
+
margin-inline-start: $spacing-xs; // RTL: flips to margin-right
|
|
69
63
|
padding: 0 $spacing-xs;
|
|
70
64
|
border: none;
|
|
71
65
|
background: transparent;
|
|
@@ -109,7 +103,7 @@
|
|
|
109
103
|
// Context label (e.g., "Searching in Products")
|
|
110
104
|
&__context {
|
|
111
105
|
position: absolute;
|
|
112
|
-
|
|
106
|
+
inset-inline-end: calc(#{$spacing-sm} + #{$command-palette-input-padding-h}); // RTL: flips to left
|
|
113
107
|
top: 50%;
|
|
114
108
|
transform: translateY(-50%);
|
|
115
109
|
font-size: $font-size-xs;
|
|
@@ -138,10 +132,7 @@
|
|
|
138
132
|
&::after {
|
|
139
133
|
content: '';
|
|
140
134
|
position: absolute;
|
|
141
|
-
|
|
142
|
-
left: 0;
|
|
143
|
-
right: 0;
|
|
144
|
-
bottom: 0;
|
|
135
|
+
inset: 0; // RTL: full overlay works in both directions
|
|
145
136
|
background-color: rgba($modal-content-bg, 0.7);
|
|
146
137
|
pointer-events: none;
|
|
147
138
|
z-index: 1;
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
thead th {
|
|
13
13
|
background-color: var(--pa-table-header-bg);
|
|
14
14
|
font-weight: $font-weight-semibold;
|
|
15
|
-
text-align:
|
|
15
|
+
text-align: start; // RTL: flips to right
|
|
16
16
|
padding: $spacing-sm $spacing-base;
|
|
17
17
|
border-bottom: $border-width-medium solid var(--pa-border-color);
|
|
18
18
|
}
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
&::before {
|
|
74
74
|
content: '';
|
|
75
75
|
position: absolute;
|
|
76
|
-
|
|
76
|
+
inset-inline-start: 0; // RTL: flips to right
|
|
77
77
|
top: 0;
|
|
78
78
|
bottom: 0;
|
|
79
79
|
width: $border-width-medium;
|
|
@@ -146,7 +146,7 @@
|
|
|
146
146
|
&::before {
|
|
147
147
|
content: attr(data-label);
|
|
148
148
|
font-weight: $font-weight-semibold;
|
|
149
|
-
margin-
|
|
149
|
+
margin-inline-end: $spacing-sm; // RTL: flips to left
|
|
150
150
|
min-width: 120px;
|
|
151
151
|
}
|
|
152
152
|
}
|