@keenmate/pure-admin-core 1.0.0-rc01 → 1.0.0-rc02
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 +59 -22
- package/dist/css/main.css +178 -88
- package/package.json +1 -1
- package/snippets/profile.html +169 -7
- package/src/scss/_base-css-variables.scss +63 -3
- package/src/scss/_core.scss +3 -0
- package/src/scss/core-components/_cards.scss +2 -2
- package/src/scss/core-components/_profile.scss +112 -40
- package/src/scss/core-components/_scrollbars.scss +41 -0
- package/src/scss/core-components/_statistics.scss +3 -3
- package/src/scss/core-components/_tabs.scss +2 -2
- package/src/scss/variables/_base.scss +185 -61
- package/src/scss/variables/_colors.scss +162 -108
- package/src/scss/variables/_components.scss +7 -6
- package/src/scss/variables/_index.scss +9 -3
- package/src/scss/variables/_layout.scss +2 -2
package/README.md
CHANGED
|
@@ -24,8 +24,14 @@ import '@keenmate/pure-admin-core/dist/css/main.css';
|
|
|
24
24
|
|
|
25
25
|
### Using a Theme
|
|
26
26
|
|
|
27
|
+
Themes are separate packages. Install and import:
|
|
28
|
+
|
|
29
|
+
```bash
|
|
30
|
+
npm install @keenmate/pure-admin-theme-audi
|
|
31
|
+
```
|
|
32
|
+
|
|
27
33
|
```html
|
|
28
|
-
<link rel="stylesheet" href="node_modules/@keenmate/pure-admin-
|
|
34
|
+
<link rel="stylesheet" href="node_modules/@keenmate/pure-admin-theme-audi/dist/audi.css">
|
|
29
35
|
```
|
|
30
36
|
|
|
31
37
|
### SCSS Customization
|
|
@@ -55,15 +61,30 @@ openModal('myModal');
|
|
|
55
61
|
|
|
56
62
|
The `snippets/` directory contains clean HTML patterns for all components:
|
|
57
63
|
|
|
58
|
-
- `
|
|
59
|
-
- `
|
|
60
|
-
- `
|
|
61
|
-
- `
|
|
62
|
-
- `
|
|
63
|
-
- `
|
|
64
|
-
- `
|
|
65
|
-
- `
|
|
66
|
-
- `
|
|
64
|
+
- `alerts.html` - Alert components
|
|
65
|
+
- `badges.html` - Badge and composite badge patterns
|
|
66
|
+
- `buttons.html` - All button variants and patterns
|
|
67
|
+
- `cards.html` - Card layouts
|
|
68
|
+
- `checkbox-lists.html` - Checkbox list patterns
|
|
69
|
+
- `code.html` - Code display blocks
|
|
70
|
+
- `command-palette.html` - Command palette (Ctrl+K)
|
|
71
|
+
- `comparison.html` - Comparison tables
|
|
72
|
+
- `forms.html` - Form elements and validation
|
|
73
|
+
- `grid.html` - Grid system layouts
|
|
74
|
+
- `layout.html` - Page layout structure
|
|
75
|
+
- `lists.html` - Styled lists (ul, ol, dl)
|
|
76
|
+
- `loaders.html` - Loading spinners and animations
|
|
77
|
+
- `modal-dialogs.html` - Confirmation dialogs
|
|
78
|
+
- `modals.html` - Modal windows
|
|
79
|
+
- `popconfirm.html` - Popconfirm component
|
|
80
|
+
- `profile.html` - Profile panel with tabs and favorites
|
|
81
|
+
- `tables.html` - Table variants
|
|
82
|
+
- `tabs.html` - Tab components
|
|
83
|
+
- `timeline.html` - Timeline components
|
|
84
|
+
- `toasts.html` - Toast notifications
|
|
85
|
+
- `tooltips.html` - Tooltips and popovers
|
|
86
|
+
- `utilities.html` - Utility classes
|
|
87
|
+
- `virtual-scroll.html` - Virtual scrolling
|
|
67
88
|
|
|
68
89
|
These snippets are the canonical reference for building framework components in any frontend framework (React, Vue, Svelte, etc.).
|
|
69
90
|
|
|
@@ -83,19 +104,26 @@ See `@pure-admin/vue` package for Vue component wrappers.
|
|
|
83
104
|
|
|
84
105
|
## Themes
|
|
85
106
|
|
|
86
|
-
|
|
107
|
+
Themes are available as separate npm packages:
|
|
87
108
|
|
|
88
|
-
| Theme |
|
|
89
|
-
|
|
90
|
-
|
|
|
91
|
-
|
|
|
92
|
-
|
|
|
93
|
-
| Express |
|
|
94
|
-
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
109
|
+
| Theme | Package | Description |
|
|
110
|
+
|-------|---------|-------------|
|
|
111
|
+
| Audi | `@keenmate/pure-admin-theme-audi` | Audi red with Fira Sans Condensed |
|
|
112
|
+
| Corporate | `@keenmate/pure-admin-theme-corporate` | Professional blue/gray |
|
|
113
|
+
| Dark | `@keenmate/pure-admin-theme-dark` | Dark mode with color variants |
|
|
114
|
+
| Express | `@keenmate/pure-admin-theme-express` | Bold yellow/red logistics |
|
|
115
|
+
| Minimal | `@keenmate/pure-admin-theme-minimal` | Clean minimal design |
|
|
116
|
+
|
|
117
|
+
### Theme Modes & Variants
|
|
118
|
+
|
|
119
|
+
Themes support light/dark modes via CSS classes on `<body>`:
|
|
120
|
+
- `.pa-mode-light` - Force light mode
|
|
121
|
+
- `.pa-mode-dark` - Force dark mode
|
|
122
|
+
|
|
123
|
+
The Dark theme supports color accent variants:
|
|
124
|
+
- `.pa-color-blue` - Blue accent
|
|
125
|
+
- `.pa-color-green` - Green accent
|
|
126
|
+
- `.pa-color-red` - Red accent
|
|
99
127
|
|
|
100
128
|
## Component Classes
|
|
101
129
|
|
|
@@ -156,6 +184,15 @@ All themes are included in this package:
|
|
|
156
184
|
- `.pa-popover--sm/md/lg` - Sizes
|
|
157
185
|
- **JavaScript Required**: Popovers require `tooltips-popovers.js` and Floating UI library for positioning
|
|
158
186
|
|
|
187
|
+
### Profile Panel
|
|
188
|
+
- `.pa-profile-panel` - Slide-in profile panel
|
|
189
|
+
- `.pa-profile-panel--open` - Open state
|
|
190
|
+
- `.pa-profile-panel__header` - Header with avatar and user info
|
|
191
|
+
- `.pa-profile-panel__tabs` - Tab navigation (Profile/Favorites)
|
|
192
|
+
- `.pa-profile-panel__nav-item` - Navigation link
|
|
193
|
+
- `.pa-profile-panel__favorite-item` - Favorite link (with remove button)
|
|
194
|
+
- `.pa-profile-panel__actions` - Action buttons (Sign Out, etc.)
|
|
195
|
+
|
|
159
196
|
## SCSS Variables
|
|
160
197
|
|
|
161
198
|
All components use SCSS variables with `!default` flags, making them fully customizable:
|