@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/README.md +71 -46
- package/dist/css/main.css +614 -123
- package/package.json +1 -1
- package/snippets/callouts.html +129 -0
- package/snippets/profile.html +217 -11
- package/src/scss/_base-css-variables.scss +77 -3
- package/src/scss/_core.scss +6 -0
- package/src/scss/core-components/_callouts.scss +139 -0
- package/src/scss/core-components/_cards.scss +2 -2
- package/src/scss/core-components/_profile.scss +125 -41
- package/src/scss/core-components/_scrollbars.scss +41 -0
- package/src/scss/core-components/_statistics.scss +3 -3
- package/src/scss/core-components/_tables.scss +0 -13
- package/src/scss/core-components/_tabs.scss +2 -2
- package/src/scss/core-components/_utilities.scss +53 -0
- package/src/scss/utilities.scss +63 -84
- package/src/scss/variables/_base.scss +185 -61
- package/src/scss/variables/_colors.scss +177 -108
- package/src/scss/variables/_components.scss +12 -6
- package/src/scss/variables/_index.scss +9 -3
- package/src/scss/variables/_layout.scss +2 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@keenmate/pure-admin-core",
|
|
3
|
-
"version": "1.0.0-
|
|
3
|
+
"version": "1.0.0-rc03",
|
|
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": {
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
<!-- ========================================
|
|
2
|
+
Callout Components
|
|
3
|
+
Documentation-style callouts with left border accent
|
|
4
|
+
======================================== -->
|
|
5
|
+
|
|
6
|
+
<!-- BASIC CALLOUTS -->
|
|
7
|
+
|
|
8
|
+
<!-- Info Callout -->
|
|
9
|
+
<div class="pa-callout pa-callout--info">
|
|
10
|
+
<strong>Note:</strong> This is an informational callout for documentation tips and notes.
|
|
11
|
+
</div>
|
|
12
|
+
|
|
13
|
+
<!-- Success Callout -->
|
|
14
|
+
<div class="pa-callout pa-callout--success">
|
|
15
|
+
<strong>Success:</strong> Operation completed successfully. Your changes have been saved.
|
|
16
|
+
</div>
|
|
17
|
+
|
|
18
|
+
<!-- Warning Callout -->
|
|
19
|
+
<div class="pa-callout pa-callout--warning">
|
|
20
|
+
<strong>Warning:</strong> This action cannot be undone. Please proceed with caution.
|
|
21
|
+
</div>
|
|
22
|
+
|
|
23
|
+
<!-- Danger Callout -->
|
|
24
|
+
<div class="pa-callout pa-callout--danger">
|
|
25
|
+
<strong>Important:</strong> This feature is deprecated and will be removed in the next version.
|
|
26
|
+
</div>
|
|
27
|
+
|
|
28
|
+
<!-- Primary Callout -->
|
|
29
|
+
<div class="pa-callout pa-callout--primary">
|
|
30
|
+
<strong>Pro Tip:</strong> You can use keyboard shortcuts to speed up your workflow.
|
|
31
|
+
</div>
|
|
32
|
+
|
|
33
|
+
<!-- Secondary Callout -->
|
|
34
|
+
<div class="pa-callout pa-callout--secondary">
|
|
35
|
+
<strong>Note:</strong> This is a secondary callout with neutral styling.
|
|
36
|
+
</div>
|
|
37
|
+
|
|
38
|
+
<!-- ========================================
|
|
39
|
+
CALLOUTS WITH ICONS
|
|
40
|
+
======================================== -->
|
|
41
|
+
|
|
42
|
+
<!-- Info with Icon -->
|
|
43
|
+
<div class="pa-callout pa-callout--info">
|
|
44
|
+
<span class="pa-callout__icon">💡</span>
|
|
45
|
+
<div class="pa-callout__content">
|
|
46
|
+
<div class="pa-callout__heading">Did you know?</div>
|
|
47
|
+
<p>You can hover over any element to see its tooltip. Tooltips provide additional context without cluttering the interface.</p>
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
|
|
51
|
+
<!-- Warning with Icon -->
|
|
52
|
+
<div class="pa-callout pa-callout--warning">
|
|
53
|
+
<span class="pa-callout__icon">⚠️</span>
|
|
54
|
+
<div class="pa-callout__content">
|
|
55
|
+
<div class="pa-callout__heading">Breaking Change</div>
|
|
56
|
+
<p>The <code>getData()</code> method now returns a Promise. Update your code to use <code>await</code> or <code>.then()</code>.</p>
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
|
|
60
|
+
<!-- Danger with Icon -->
|
|
61
|
+
<div class="pa-callout pa-callout--danger">
|
|
62
|
+
<span class="pa-callout__icon">🚨</span>
|
|
63
|
+
<div class="pa-callout__content">
|
|
64
|
+
<div class="pa-callout__heading">Security Notice</div>
|
|
65
|
+
<p>Never commit API keys or secrets to version control. Use environment variables instead.</p>
|
|
66
|
+
</div>
|
|
67
|
+
</div>
|
|
68
|
+
|
|
69
|
+
<!-- Success with Icon -->
|
|
70
|
+
<div class="pa-callout pa-callout--success">
|
|
71
|
+
<span class="pa-callout__icon">✅</span>
|
|
72
|
+
<div class="pa-callout__content">
|
|
73
|
+
<div class="pa-callout__heading">Best Practice</div>
|
|
74
|
+
<p>Always validate user input on both client and server side for maximum security.</p>
|
|
75
|
+
</div>
|
|
76
|
+
</div>
|
|
77
|
+
|
|
78
|
+
<!-- ========================================
|
|
79
|
+
CALLOUT SIZES
|
|
80
|
+
======================================== -->
|
|
81
|
+
|
|
82
|
+
<!-- Small Callout -->
|
|
83
|
+
<div class="pa-callout pa-callout--info pa-callout--sm">
|
|
84
|
+
<strong>Note:</strong> This is a small callout for compact spaces.
|
|
85
|
+
</div>
|
|
86
|
+
|
|
87
|
+
<!-- Default Callout -->
|
|
88
|
+
<div class="pa-callout pa-callout--info">
|
|
89
|
+
<strong>Note:</strong> This is a default-sized callout.
|
|
90
|
+
</div>
|
|
91
|
+
|
|
92
|
+
<!-- Large Callout -->
|
|
93
|
+
<div class="pa-callout pa-callout--info pa-callout--lg">
|
|
94
|
+
<strong>Note:</strong> This is a large callout for prominent notices.
|
|
95
|
+
</div>
|
|
96
|
+
|
|
97
|
+
<!-- ========================================
|
|
98
|
+
CALLOUTS WITH LISTS
|
|
99
|
+
======================================== -->
|
|
100
|
+
|
|
101
|
+
<!-- Callout with Unordered List -->
|
|
102
|
+
<div class="pa-callout pa-callout--info">
|
|
103
|
+
<div class="pa-callout__heading">Requirements</div>
|
|
104
|
+
<ul>
|
|
105
|
+
<li>Node.js version 16 or higher</li>
|
|
106
|
+
<li>npm version 8 or higher</li>
|
|
107
|
+
<li>A modern web browser</li>
|
|
108
|
+
</ul>
|
|
109
|
+
</div>
|
|
110
|
+
|
|
111
|
+
<!-- Callout with Ordered List -->
|
|
112
|
+
<div class="pa-callout pa-callout--warning">
|
|
113
|
+
<div class="pa-callout__heading">Migration Steps</div>
|
|
114
|
+
<ol>
|
|
115
|
+
<li>Backup your database</li>
|
|
116
|
+
<li>Update dependencies with <code>npm update</code></li>
|
|
117
|
+
<li>Run migrations with <code>npm run migrate</code></li>
|
|
118
|
+
<li>Verify the application starts correctly</li>
|
|
119
|
+
</ol>
|
|
120
|
+
</div>
|
|
121
|
+
|
|
122
|
+
<!-- ========================================
|
|
123
|
+
CALLOUTS WITH CODE
|
|
124
|
+
======================================== -->
|
|
125
|
+
|
|
126
|
+
<!-- Callout with Inline Code -->
|
|
127
|
+
<div class="pa-callout pa-callout--primary">
|
|
128
|
+
<strong>Tip:</strong> Use <code>console.table()</code> instead of <code>console.log()</code> for arrays and objects to get a nicely formatted table output.
|
|
129
|
+
</div>
|
package/snippets/profile.html
CHANGED
|
@@ -8,15 +8,15 @@
|
|
|
8
8
|
================================ -->
|
|
9
9
|
|
|
10
10
|
<!-- Profile Button (goes in header/navbar) -->
|
|
11
|
-
<button class="pa-
|
|
11
|
+
<button class="pa-header__profile-btn" onclick="toggleProfilePanel()" aria-label="User Profile">
|
|
12
12
|
<span class="pa-btn__icon">👤</span>
|
|
13
|
-
<span class="pa-
|
|
13
|
+
<span class="pa-header__profile-name">John Doe</span>
|
|
14
14
|
</button>
|
|
15
15
|
|
|
16
16
|
<!-- Profile Button with Font Awesome -->
|
|
17
|
-
<button class="pa-
|
|
17
|
+
<button class="pa-header__profile-btn" onclick="toggleProfilePanel()" aria-label="User Profile">
|
|
18
18
|
<span class="pa-btn__icon"><i class="fa-solid fa-user"></i></span>
|
|
19
|
-
<span class="pa-
|
|
19
|
+
<span class="pa-header__profile-name">John Doe</span>
|
|
20
20
|
</button>
|
|
21
21
|
|
|
22
22
|
|
|
@@ -25,6 +25,7 @@
|
|
|
25
25
|
================================ -->
|
|
26
26
|
|
|
27
27
|
<!-- Complete Profile Panel (place before closing </body> tag) -->
|
|
28
|
+
<!-- Note: Use title attributes on name/email for tooltips when text may be truncated -->
|
|
28
29
|
<div class="pa-profile-panel" id="profilePanel">
|
|
29
30
|
<div class="pa-profile-panel__overlay" onclick="closeProfilePanel()"></div>
|
|
30
31
|
<div class="pa-profile-panel__content">
|
|
@@ -33,8 +34,8 @@
|
|
|
33
34
|
<span class="pa-profile-panel__avatar-icon">👤</span>
|
|
34
35
|
</div>
|
|
35
36
|
<div class="pa-profile-panel__info">
|
|
36
|
-
<h3 class="pa-profile-panel__name">John Doe</h3>
|
|
37
|
-
<p class="pa-profile-panel__email">john.doe@company.com</p>
|
|
37
|
+
<h3 class="pa-profile-panel__name" title="John Doe">John Doe</h3>
|
|
38
|
+
<p class="pa-profile-panel__email" title="john.doe@company.com">john.doe@company.com</p>
|
|
38
39
|
<span class="pa-profile-panel__role">Administrator</span>
|
|
39
40
|
</div>
|
|
40
41
|
<button class="pa-profile-panel__close" onclick="closeProfilePanel()" aria-label="Close Profile">
|
|
@@ -81,6 +82,157 @@
|
|
|
81
82
|
</div>
|
|
82
83
|
|
|
83
84
|
|
|
85
|
+
<!-- ================================
|
|
86
|
+
PROFILE PANEL - NO AVATAR (CORPORATE)
|
|
87
|
+
For apps without user photos
|
|
88
|
+
================================ -->
|
|
89
|
+
|
|
90
|
+
<!-- Profile Panel without avatar (for corporate apps that don't have user photos) -->
|
|
91
|
+
<!-- Add --no-avatar modifier to header to hide the avatar -->
|
|
92
|
+
<div class="pa-profile-panel" id="profilePanel">
|
|
93
|
+
<div class="pa-profile-panel__overlay" onclick="closeProfilePanel()"></div>
|
|
94
|
+
<div class="pa-profile-panel__content">
|
|
95
|
+
<div class="pa-profile-panel__header pa-profile-panel__header--no-avatar">
|
|
96
|
+
<div class="pa-profile-panel__avatar">
|
|
97
|
+
<span class="pa-profile-panel__avatar-icon">👤</span>
|
|
98
|
+
</div>
|
|
99
|
+
<div class="pa-profile-panel__info">
|
|
100
|
+
<h3 class="pa-profile-panel__name" title="John Doe">John Doe</h3>
|
|
101
|
+
<p class="pa-profile-panel__email" title="john.doe@company.com">john.doe@company.com</p>
|
|
102
|
+
<span class="pa-profile-panel__role">Administrator</span>
|
|
103
|
+
</div>
|
|
104
|
+
<button class="pa-profile-panel__close" onclick="closeProfilePanel()" aria-label="Close Profile">
|
|
105
|
+
✕
|
|
106
|
+
</button>
|
|
107
|
+
</div>
|
|
108
|
+
|
|
109
|
+
<div class="pa-profile-panel__body">
|
|
110
|
+
<nav class="pa-profile-panel__nav">
|
|
111
|
+
<ul>
|
|
112
|
+
<li><a href="#profile" class="pa-profile-panel__nav-item">
|
|
113
|
+
<span class="pa-profile-panel__nav-icon">👤</span>
|
|
114
|
+
Profile Settings
|
|
115
|
+
</a></li>
|
|
116
|
+
<li><a href="#logout" class="pa-profile-panel__nav-item">
|
|
117
|
+
<span class="pa-profile-panel__nav-icon">🚪</span>
|
|
118
|
+
Sign Out
|
|
119
|
+
</a></li>
|
|
120
|
+
</ul>
|
|
121
|
+
</nav>
|
|
122
|
+
</div>
|
|
123
|
+
</div>
|
|
124
|
+
</div>
|
|
125
|
+
|
|
126
|
+
|
|
127
|
+
<!-- ================================
|
|
128
|
+
PROFILE PANEL - WITH TABS (PROFILE + FAVORITES)
|
|
129
|
+
================================ -->
|
|
130
|
+
|
|
131
|
+
<div class="pa-profile-panel" id="profilePanel">
|
|
132
|
+
<div class="pa-profile-panel__overlay" onclick="closeProfilePanel()"></div>
|
|
133
|
+
<div class="pa-profile-panel__content">
|
|
134
|
+
<div class="pa-profile-panel__header">
|
|
135
|
+
<div class="pa-profile-panel__avatar">
|
|
136
|
+
<span class="pa-profile-panel__avatar-icon">👤</span>
|
|
137
|
+
</div>
|
|
138
|
+
<div class="pa-profile-panel__info">
|
|
139
|
+
<h3 class="pa-profile-panel__name">John Doe</h3>
|
|
140
|
+
<p class="pa-profile-panel__email">john.doe@company.com</p>
|
|
141
|
+
<span class="pa-profile-panel__role">Administrator</span>
|
|
142
|
+
</div>
|
|
143
|
+
<button class="pa-profile-panel__close" onclick="closeProfilePanel()" aria-label="Close Profile">
|
|
144
|
+
✕
|
|
145
|
+
</button>
|
|
146
|
+
</div>
|
|
147
|
+
|
|
148
|
+
<!-- Profile Panel Tabs -->
|
|
149
|
+
<div class="pa-profile-panel__tabs">
|
|
150
|
+
<div class="pa-tabs pa-tabs--full">
|
|
151
|
+
<button class="pa-tabs__item pa-tabs__item--active" data-profile-tab="profile">
|
|
152
|
+
<span>👤</span> Profile
|
|
153
|
+
</button>
|
|
154
|
+
<button class="pa-tabs__item" data-profile-tab="favorites">
|
|
155
|
+
<span>⭐</span> Favorites
|
|
156
|
+
</button>
|
|
157
|
+
</div>
|
|
158
|
+
</div>
|
|
159
|
+
|
|
160
|
+
<div class="pa-profile-panel__body">
|
|
161
|
+
<!-- Profile Tab -->
|
|
162
|
+
<div class="pa-tabs__panel pa-tabs__panel--active" data-profile-panel="profile">
|
|
163
|
+
<nav class="pa-profile-panel__nav">
|
|
164
|
+
<ul>
|
|
165
|
+
<li><a href="#profile" class="pa-profile-panel__nav-item">
|
|
166
|
+
<span class="pa-profile-panel__nav-icon">👤</span>
|
|
167
|
+
Profile Settings
|
|
168
|
+
</a></li>
|
|
169
|
+
<li><a href="#security" class="pa-profile-panel__nav-item">
|
|
170
|
+
<span class="pa-profile-panel__nav-icon">🔒</span>
|
|
171
|
+
Security
|
|
172
|
+
</a></li>
|
|
173
|
+
<li><a href="#notifications" class="pa-profile-panel__nav-item">
|
|
174
|
+
<span class="pa-profile-panel__nav-icon">🔔</span>
|
|
175
|
+
Notifications
|
|
176
|
+
</a></li>
|
|
177
|
+
<li><a href="#preferences" class="pa-profile-panel__nav-item">
|
|
178
|
+
<span class="pa-profile-panel__nav-icon">⚙️</span>
|
|
179
|
+
Preferences
|
|
180
|
+
</a></li>
|
|
181
|
+
<li><a href="#help" class="pa-profile-panel__nav-item">
|
|
182
|
+
<span class="pa-profile-panel__nav-icon">❓</span>
|
|
183
|
+
Help & Support
|
|
184
|
+
</a></li>
|
|
185
|
+
</ul>
|
|
186
|
+
</nav>
|
|
187
|
+
|
|
188
|
+
<div class="pa-profile-panel__actions">
|
|
189
|
+
<button class="pa-btn pa-btn--secondary pa-btn--block">
|
|
190
|
+
Switch Account
|
|
191
|
+
</button>
|
|
192
|
+
<button class="pa-btn pa-btn--danger pa-btn--block">
|
|
193
|
+
Sign Out
|
|
194
|
+
</button>
|
|
195
|
+
</div>
|
|
196
|
+
</div>
|
|
197
|
+
|
|
198
|
+
<!-- Favorites Tab -->
|
|
199
|
+
<div class="pa-tabs__panel" data-profile-panel="favorites">
|
|
200
|
+
<div class="pa-profile-panel__favorites">
|
|
201
|
+
<ul>
|
|
202
|
+
<li>
|
|
203
|
+
<div class="pa-profile-panel__favorite-item" data-href="/dashboard">
|
|
204
|
+
<span class="pa-profile-panel__favorite-icon">📊</span>
|
|
205
|
+
<span class="pa-profile-panel__favorite-label">Dashboard</span>
|
|
206
|
+
<button class="pa-profile-panel__favorite-remove" title="Remove from favorites">✕</button>
|
|
207
|
+
</div>
|
|
208
|
+
</li>
|
|
209
|
+
<li>
|
|
210
|
+
<div class="pa-profile-panel__favorite-item" data-href="/reports">
|
|
211
|
+
<span class="pa-profile-panel__favorite-icon">📝</span>
|
|
212
|
+
<span class="pa-profile-panel__favorite-label">Reports</span>
|
|
213
|
+
<button class="pa-profile-panel__favorite-remove" title="Remove from favorites">✕</button>
|
|
214
|
+
</div>
|
|
215
|
+
</li>
|
|
216
|
+
<li>
|
|
217
|
+
<div class="pa-profile-panel__favorite-item" data-href="/settings">
|
|
218
|
+
<span class="pa-profile-panel__favorite-icon">⚙️</span>
|
|
219
|
+
<span class="pa-profile-panel__favorite-label">Settings</span>
|
|
220
|
+
<button class="pa-profile-panel__favorite-remove" title="Remove from favorites">✕</button>
|
|
221
|
+
</div>
|
|
222
|
+
</li>
|
|
223
|
+
</ul>
|
|
224
|
+
</div>
|
|
225
|
+
<div class="pa-profile-panel__favorites-add">
|
|
226
|
+
<button class="pa-btn pa-btn--sm pa-btn--outline-secondary pa-btn--block">
|
|
227
|
+
+ Add Current Page
|
|
228
|
+
</button>
|
|
229
|
+
</div>
|
|
230
|
+
</div>
|
|
231
|
+
</div>
|
|
232
|
+
</div>
|
|
233
|
+
</div>
|
|
234
|
+
|
|
235
|
+
|
|
84
236
|
<!-- ================================
|
|
85
237
|
PROFILE PANEL - WITH FONT AWESOME
|
|
86
238
|
================================ -->
|
|
@@ -206,7 +358,7 @@ function closeProfilePanel() {
|
|
|
206
358
|
*/
|
|
207
359
|
document.addEventListener('click', (e) => {
|
|
208
360
|
const profilePanel = document.getElementById('profilePanel');
|
|
209
|
-
const profileBtn = document.querySelector('.pa-
|
|
361
|
+
const profileBtn = document.querySelector('.pa-header__profile-btn');
|
|
210
362
|
|
|
211
363
|
if (!profilePanel || !profileBtn) return;
|
|
212
364
|
|
|
@@ -215,6 +367,43 @@ document.addEventListener('click', (e) => {
|
|
|
215
367
|
closeProfilePanel();
|
|
216
368
|
}
|
|
217
369
|
});
|
|
370
|
+
|
|
371
|
+
/**
|
|
372
|
+
* Profile panel tab switching
|
|
373
|
+
*/
|
|
374
|
+
document.querySelectorAll('[data-profile-tab]').forEach(tab => {
|
|
375
|
+
tab.addEventListener('click', () => {
|
|
376
|
+
const tabId = tab.dataset.profileTab;
|
|
377
|
+
// Update active tab
|
|
378
|
+
document.querySelectorAll('[data-profile-tab]').forEach(t =>
|
|
379
|
+
t.classList.toggle('pa-tabs__item--active', t.dataset.profileTab === tabId));
|
|
380
|
+
// Update active panel
|
|
381
|
+
document.querySelectorAll('[data-profile-panel]').forEach(p =>
|
|
382
|
+
p.classList.toggle('pa-tabs__panel--active', p.dataset.profilePanel === tabId));
|
|
383
|
+
});
|
|
384
|
+
});
|
|
385
|
+
|
|
386
|
+
/**
|
|
387
|
+
* Favorite item click - navigate using data-href
|
|
388
|
+
*/
|
|
389
|
+
document.querySelectorAll('.pa-profile-panel__favorite-item').forEach(item => {
|
|
390
|
+
item.addEventListener('click', (e) => {
|
|
391
|
+
// Skip if clicking the remove button
|
|
392
|
+
if (e.target.closest('.pa-profile-panel__favorite-remove')) return;
|
|
393
|
+
const href = item.dataset.href;
|
|
394
|
+
if (href) window.location.href = href;
|
|
395
|
+
});
|
|
396
|
+
});
|
|
397
|
+
|
|
398
|
+
/**
|
|
399
|
+
* Favorite remove button - remove item from list
|
|
400
|
+
*/
|
|
401
|
+
document.querySelectorAll('.pa-profile-panel__favorite-remove').forEach(btn => {
|
|
402
|
+
btn.addEventListener('click', (e) => {
|
|
403
|
+
e.stopPropagation();
|
|
404
|
+
btn.closest('li').remove();
|
|
405
|
+
});
|
|
406
|
+
});
|
|
218
407
|
</script>
|
|
219
408
|
|
|
220
409
|
|
|
@@ -224,9 +413,9 @@ document.addEventListener('click', (e) => {
|
|
|
224
413
|
|
|
225
414
|
<!--
|
|
226
415
|
PROFILE BUTTON (HEADER):
|
|
227
|
-
- .pa-
|
|
416
|
+
- .pa-header__profile-btn - Profile button in header
|
|
228
417
|
- .pa-btn__icon - Icon container
|
|
229
|
-
- .pa-
|
|
418
|
+
- .pa-header__profile-name - User name text
|
|
230
419
|
|
|
231
420
|
PROFILE PANEL STRUCTURE:
|
|
232
421
|
- .pa-profile-panel - Main panel container
|
|
@@ -237,14 +426,21 @@ PROFILE PANEL STRUCTURE:
|
|
|
237
426
|
|
|
238
427
|
PANEL HEADER:
|
|
239
428
|
- .pa-profile-panel__header - Header container
|
|
429
|
+
- .pa-profile-panel__header--no-avatar - Modifier to hide avatar (for corporate apps)
|
|
240
430
|
- .pa-profile-panel__avatar - Avatar container
|
|
241
431
|
- .pa-profile-panel__avatar-icon - Avatar icon/image
|
|
242
432
|
- .pa-profile-panel__info - User info container
|
|
243
|
-
- .pa-profile-panel__name - User name
|
|
244
|
-
- .pa-profile-panel__email - User email
|
|
433
|
+
- .pa-profile-panel__name - User name (truncates with ellipsis, add title for tooltip)
|
|
434
|
+
- .pa-profile-panel__email - User email (truncates with ellipsis, add title for tooltip)
|
|
245
435
|
- .pa-profile-panel__role - User role badge
|
|
246
436
|
- .pa-profile-panel__close - Close button
|
|
247
437
|
|
|
438
|
+
PANEL TABS (optional):
|
|
439
|
+
- .pa-profile-panel__tabs - Tabs container
|
|
440
|
+
- .pa-tabs.pa-tabs--full - Full-width tabs
|
|
441
|
+
- [data-profile-tab] - Tab button attribute
|
|
442
|
+
- [data-profile-panel] - Tab panel attribute
|
|
443
|
+
|
|
248
444
|
PANEL BODY:
|
|
249
445
|
- .pa-profile-panel__body - Body container
|
|
250
446
|
- .pa-profile-panel__nav - Navigation menu
|
|
@@ -252,10 +448,20 @@ PANEL BODY:
|
|
|
252
448
|
- .pa-profile-panel__nav-icon - Navigation icon
|
|
253
449
|
- .pa-profile-panel__actions - Action buttons container
|
|
254
450
|
|
|
451
|
+
FAVORITES SECTION:
|
|
452
|
+
- .pa-profile-panel__favorites - Favorites container
|
|
453
|
+
- .pa-profile-panel__favorite-item - Favorite link (use div with data-href)
|
|
454
|
+
- .pa-profile-panel__favorite-icon - Favorite icon
|
|
455
|
+
- .pa-profile-panel__favorite-label - Favorite text label
|
|
456
|
+
- .pa-profile-panel__favorite-remove - Remove button (appears on hover)
|
|
457
|
+
- .pa-profile-panel__favorites-add - Add button container
|
|
458
|
+
|
|
255
459
|
JAVASCRIPT FUNCTIONS:
|
|
256
460
|
- toggleProfilePanel() - Toggle panel open/closed
|
|
257
461
|
- closeProfilePanel() - Close panel
|
|
258
462
|
- Auto-closes when clicking outside
|
|
463
|
+
- Tab switching via data-profile-tab/data-profile-panel attributes
|
|
464
|
+
- Favorite navigation via data-href attribute
|
|
259
465
|
|
|
260
466
|
PLACEMENT:
|
|
261
467
|
- Profile button goes in header/navbar
|
|
@@ -15,19 +15,31 @@
|
|
|
15
15
|
// ============================================================================
|
|
16
16
|
|
|
17
17
|
@mixin output-base-css-variables {
|
|
18
|
-
// === Colors ===
|
|
18
|
+
// === Accent Colors ===
|
|
19
19
|
--base-accent-color: #{$base-accent-color};
|
|
20
20
|
--base-accent-color-hover: #{$base-accent-color-hover};
|
|
21
21
|
--base-accent-color-active: #{$base-accent-color-active};
|
|
22
22
|
--base-accent-color-light: #{$base-accent-color-light};
|
|
23
23
|
--base-accent-color-light-hover: #{$base-accent-color-light-hover};
|
|
24
|
-
|
|
25
|
-
|
|
24
|
+
|
|
25
|
+
// === Text Colors ===
|
|
26
26
|
--base-text-color-1: #{$base-text-color-1};
|
|
27
27
|
--base-text-color-2: #{$base-text-color-2};
|
|
28
28
|
--base-text-color-3: #{$base-text-color-3};
|
|
29
29
|
--base-text-color-4: #{$base-text-color-4};
|
|
30
30
|
--base-text-color-on-accent: #{$base-text-color-on-accent};
|
|
31
|
+
|
|
32
|
+
// === Surface Colors ===
|
|
33
|
+
--base-surface-1: #{$base-surface-1};
|
|
34
|
+
--base-surface-2: #{$base-surface-2};
|
|
35
|
+
--base-surface-3: #{$base-surface-3};
|
|
36
|
+
--base-surface-inverse: #{$base-surface-inverse};
|
|
37
|
+
--base-overlay-bg: #{$base-overlay-bg};
|
|
38
|
+
--base-shadow-color: #{$base-shadow-color};
|
|
39
|
+
--base-primary-bg: #{$base-primary-bg};
|
|
40
|
+
--base-primary-bg-hover: #{$base-primary-bg-hover};
|
|
41
|
+
|
|
42
|
+
// === Border Colors ===
|
|
31
43
|
--base-border-color: #{$base-border-color};
|
|
32
44
|
--base-border: #{$base-border};
|
|
33
45
|
|
|
@@ -56,8 +68,55 @@
|
|
|
56
68
|
--base-tooltip-bg: #{$base-tooltip-bg};
|
|
57
69
|
--base-tooltip-text-color: #{$base-tooltip-text-color};
|
|
58
70
|
|
|
71
|
+
// === Contextual Colors - Success ===
|
|
72
|
+
--base-success-color: #{$base-success-color};
|
|
73
|
+
--base-success-color-hover: #{$base-success-color-hover};
|
|
74
|
+
--base-success-bg-light: #{$base-success-bg-light};
|
|
75
|
+
--base-success-bg-subtle: #{$base-success-bg-subtle};
|
|
76
|
+
--base-success-border: #{$base-success-border};
|
|
77
|
+
--base-success-text: #{$base-success-text};
|
|
78
|
+
--base-success-text-light: #{$base-success-text-light};
|
|
79
|
+
--base-text-on-success: #{$base-text-on-success};
|
|
80
|
+
|
|
81
|
+
// === Contextual Colors - Danger ===
|
|
82
|
+
--base-danger-color: #{$base-danger-color};
|
|
83
|
+
--base-danger-color-hover: #{$base-danger-color-hover};
|
|
84
|
+
--base-danger-bg-light: #{$base-danger-bg-light};
|
|
85
|
+
--base-danger-bg-subtle: #{$base-danger-bg-subtle};
|
|
86
|
+
--base-danger-border: #{$base-danger-border};
|
|
87
|
+
--base-danger-text: #{$base-danger-text};
|
|
88
|
+
--base-danger-text-light: #{$base-danger-text-light};
|
|
89
|
+
--base-text-on-danger: #{$base-text-on-danger};
|
|
90
|
+
|
|
91
|
+
// === Contextual Colors - Warning ===
|
|
92
|
+
--base-warning-color: #{$base-warning-color};
|
|
93
|
+
--base-warning-color-hover: #{$base-warning-color-hover};
|
|
94
|
+
--base-warning-bg-light: #{$base-warning-bg-light};
|
|
95
|
+
--base-warning-bg-subtle: #{$base-warning-bg-subtle};
|
|
96
|
+
--base-warning-border: #{$base-warning-border};
|
|
97
|
+
--base-warning-text: #{$base-warning-text};
|
|
98
|
+
--base-warning-text-light: #{$base-warning-text-light};
|
|
99
|
+
--base-text-on-warning: #{$base-text-on-warning};
|
|
100
|
+
|
|
101
|
+
// === Contextual Colors - Info ===
|
|
102
|
+
--base-info-color: #{$base-info-color};
|
|
103
|
+
--base-info-color-hover: #{$base-info-color-hover};
|
|
104
|
+
--base-info-bg-light: #{$base-info-bg-light};
|
|
105
|
+
--base-info-bg-subtle: #{$base-info-bg-subtle};
|
|
106
|
+
--base-info-border: #{$base-info-border};
|
|
107
|
+
--base-info-text: #{$base-info-text};
|
|
108
|
+
--base-info-text-light: #{$base-info-text-light};
|
|
109
|
+
--base-text-on-info: #{$base-text-on-info};
|
|
110
|
+
|
|
111
|
+
// === Interactive States ===
|
|
112
|
+
--base-hover-overlay: #{$base-hover-overlay};
|
|
113
|
+
--base-active-overlay: #{$base-active-overlay};
|
|
114
|
+
--base-focus-ring-color: #{$base-focus-ring-color};
|
|
115
|
+
--base-focus-ring-width: #{$base-focus-ring-width};
|
|
116
|
+
|
|
59
117
|
// === Typography ===
|
|
60
118
|
--base-font-family: #{$base-font-family};
|
|
119
|
+
--base-font-family-mono: #{$base-font-family-mono};
|
|
61
120
|
--base-font-size-2xs: #{$base-font-size-2xs};
|
|
62
121
|
--base-font-size-xs: #{$base-font-size-xs};
|
|
63
122
|
--base-font-size-sm: #{$base-font-size-sm};
|
|
@@ -68,6 +127,7 @@
|
|
|
68
127
|
--base-font-weight-normal: #{$base-font-weight-normal};
|
|
69
128
|
--base-font-weight-medium: #{$base-font-weight-medium};
|
|
70
129
|
--base-font-weight-semibold: #{$base-font-weight-semibold};
|
|
130
|
+
--base-font-weight-bold: #{$base-font-weight-bold};
|
|
71
131
|
--base-line-height-tight: #{$base-line-height-tight};
|
|
72
132
|
--base-line-height-normal: #{$base-line-height-normal};
|
|
73
133
|
--base-line-height-relaxed: #{$base-line-height-relaxed};
|
|
@@ -345,4 +405,18 @@
|
|
|
345
405
|
--pa-multiselect-option-hover-bg: #{$multiselect-option-hover-bg};
|
|
346
406
|
--pa-multiselect-pill-bg: #{$multiselect-pill-bg};
|
|
347
407
|
--pa-multiselect-pill-border: #{$multiselect-pill-border};
|
|
408
|
+
|
|
409
|
+
// =========================================================================
|
|
410
|
+
// CUSTOM THEME COLORS (1-9)
|
|
411
|
+
// Themes can override $color-1 through $color-9 to define branded colors
|
|
412
|
+
// =========================================================================
|
|
413
|
+
--pa-color-1: #{$color-1};
|
|
414
|
+
--pa-color-2: #{$color-2};
|
|
415
|
+
--pa-color-3: #{$color-3};
|
|
416
|
+
--pa-color-4: #{$color-4};
|
|
417
|
+
--pa-color-5: #{$color-5};
|
|
418
|
+
--pa-color-6: #{$color-6};
|
|
419
|
+
--pa-color-7: #{$color-7};
|
|
420
|
+
--pa-color-8: #{$color-8};
|
|
421
|
+
--pa-color-9: #{$color-9};
|
|
348
422
|
}
|
package/src/scss/_core.scss
CHANGED
|
@@ -11,6 +11,9 @@
|
|
|
11
11
|
// Base styles and resets
|
|
12
12
|
@use 'core-components/base' as *;
|
|
13
13
|
|
|
14
|
+
// Scrollbar styling (global)
|
|
15
|
+
@use 'core-components/scrollbars' as *;
|
|
16
|
+
|
|
14
17
|
// Layout components (header, sidebar, footer, responsive)
|
|
15
18
|
@use 'core-components/layout' as *;
|
|
16
19
|
|
|
@@ -44,6 +47,9 @@
|
|
|
44
47
|
// Alert components
|
|
45
48
|
@use 'core-components/alerts' as *;
|
|
46
49
|
|
|
50
|
+
// Callout components (documentation-style)
|
|
51
|
+
@use 'core-components/callouts' as *;
|
|
52
|
+
|
|
47
53
|
// Form elements
|
|
48
54
|
@use 'core-components/forms' as *;
|
|
49
55
|
|