@keenmate/pure-admin-core 1.0.0-rc04 → 1.0.0-rc06
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 +148 -0
- package/dist/css/main.css +558 -28
- package/package.json +1 -1
- package/snippets/layout.html +79 -38
- package/snippets/modals.html +43 -4
- package/snippets/tables.html +8 -6
- package/snippets/tooltips.html +68 -0
- package/src/scss/core-components/_buttons.scss +6 -0
- package/src/scss/core-components/_cards.scss +40 -4
- package/src/scss/core-components/_tables.scss +37 -13
- package/src/scss/core-components/_tabs.scss +122 -0
- package/src/scss/core-components/_tooltips.scss +40 -0
- package/src/scss/core-components/_utilities.scss +15 -0
- package/src/scss/core-components/forms/_form-inputs.scss +7 -1
- package/src/scss/core-components/layout/_layout-container.scss +32 -2
- package/src/scss/core-components/layout/_navbar-elements.scss +3 -2
- package/src/scss/core-components/layout/_navbar.scss +23 -0
- package/src/scss/themes/audi-light.scss +31 -1
- package/src/scss/themes/audi.scss +18 -3
- package/src/scss/themes/corporate.scss +26 -0
- package/src/scss/themes/dark-blue.scss +13 -0
- package/src/scss/themes/dark-green.scss +13 -0
- package/src/scss/themes/dark-red.scss +13 -0
- package/src/scss/themes/dark.scss +13 -0
- package/src/scss/themes/express.scss +13 -0
- package/src/scss/themes/minimal.scss +13 -0
- package/src/scss/variables/_components.scss +51 -12
package/README.md
CHANGED
|
@@ -104,8 +104,40 @@ The Dark theme supports color accent variants:
|
|
|
104
104
|
- `.pa-color-green` - Green accent
|
|
105
105
|
- `.pa-color-red` - Red accent
|
|
106
106
|
|
|
107
|
+
### Web Component Dark Mode Support
|
|
108
|
+
|
|
109
|
+
When switching theme modes, also set `data-theme` attribute on `<body>` for web component compatibility:
|
|
110
|
+
```js
|
|
111
|
+
document.body.dataset.theme = 'dark'; // or 'light'
|
|
112
|
+
```
|
|
113
|
+
This enables dark mode support for web components like `@keenmate/web-grid` that look for `data-theme` attribute.
|
|
114
|
+
|
|
107
115
|
## Component Classes
|
|
108
116
|
|
|
117
|
+
### Grid System
|
|
118
|
+
- `.pa-row` - Flex container for columns
|
|
119
|
+
- `.pa-col` - Auto-equal width column (flex: 1)
|
|
120
|
+
- `.pa-col-auto` - Content-based width
|
|
121
|
+
- **Percentage columns (5% increments):** `.pa-col-5`, `.pa-col-10`, ... `.pa-col-100`
|
|
122
|
+
- **Fraction columns:**
|
|
123
|
+
- `.pa-col-1-2` (50%), `.pa-col-1-3` (33.3%), `.pa-col-2-3` (66.7%)
|
|
124
|
+
- `.pa-col-1-4` (25%), `.pa-col-3-4` (75%)
|
|
125
|
+
- `.pa-col-1-5` (20%), `.pa-col-2-5` (40%), `.pa-col-3-5` (60%), `.pa-col-4-5` (80%)
|
|
126
|
+
- `.pa-col-1-6` (16.7%), `.pa-col-5-6` (83.3%)
|
|
127
|
+
- `.pa-col-1-12` (8.3%), `.pa-col-5-12` (41.7%), `.pa-col-7-12` (58.3%), `.pa-col-11-12` (91.7%)
|
|
128
|
+
- **Responsive breakpoints:** `.pa-col-sm-*`, `.pa-col-md-*`, `.pa-col-lg-*`, `.pa-col-xl-*`
|
|
129
|
+
- **Offsets:** `.pa-offset-5`, `.pa-offset-10`, ... `.pa-offset-95`
|
|
130
|
+
- **Row modifiers:**
|
|
131
|
+
- `.pa-row--no-gutter` - Remove column gutters
|
|
132
|
+
- `.pa-row--center` - Center columns horizontally
|
|
133
|
+
- `.pa-row--end` - Align columns to end
|
|
134
|
+
- `.pa-row--between` - Space between columns
|
|
135
|
+
- `.pa-row--around` - Space around columns
|
|
136
|
+
- `.pa-row--top` - Align columns to top
|
|
137
|
+
- `.pa-row--middle` - Align columns to middle
|
|
138
|
+
- `.pa-row--bottom` - Align columns to bottom
|
|
139
|
+
- `.pa-row--stretch` - Stretch columns to equal height
|
|
140
|
+
|
|
109
141
|
### Buttons
|
|
110
142
|
- `.pa-btn` - Base button
|
|
111
143
|
- `.pa-btn--primary/secondary/success/danger/warning/info` - Variants
|
|
@@ -122,10 +154,35 @@ The Dark theme supports color accent variants:
|
|
|
122
154
|
|
|
123
155
|
### Layout & Sidebar
|
|
124
156
|
- `.pa-layout` - Main layout container
|
|
157
|
+
- `.pa-layout__inner` - Inner wrapper for sidebar + content
|
|
158
|
+
- `.pa-layout__content` - Content wrapper
|
|
159
|
+
- `.pa-layout__main` - Main content area
|
|
125
160
|
- `.pa-layout__sidebar` - Sidebar navigation
|
|
126
161
|
- `.pa-layout__sidebar--icon-collapse` - Icon-only collapse mode (icons maintain fixed position when collapsed)
|
|
127
162
|
- `.sidebar-hidden` - Body class to toggle sidebar visibility
|
|
128
163
|
|
|
164
|
+
### Navbar (Header)
|
|
165
|
+
- `.pa-navbar` - Fixed navbar container
|
|
166
|
+
- `.pa-navbar__inner` - Inner content wrapper
|
|
167
|
+
- **Three-section layout:**
|
|
168
|
+
- `.pa-header__left` - Left section (burger, brand, nav) - stays anchored left
|
|
169
|
+
- `.pa-header__center` - Center section (page title) - flexible
|
|
170
|
+
- `.pa-header__right` - Right section (notifications, profile) - stays anchored right
|
|
171
|
+
- `.pa-header__burger` - Hamburger menu button
|
|
172
|
+
- `.pa-header__brand` - Brand/logo container
|
|
173
|
+
- `.pa-header__nav` - Navigation links container
|
|
174
|
+
- `.pa-header__nav--left/--right` - Navigation position
|
|
175
|
+
- `.pa-header__title` - Page title
|
|
176
|
+
- `.pa-header__profile-btn` - Profile button
|
|
177
|
+
|
|
178
|
+
### Footer
|
|
179
|
+
- `.pa-layout__footer` - Footer container (uses `min-height`, can expand)
|
|
180
|
+
- **Three-section layout:**
|
|
181
|
+
- `.pa-footer__left` - Left section (copyright) - stays anchored left
|
|
182
|
+
- `.pa-footer__center` - Center section (optional) - flexible
|
|
183
|
+
- `.pa-footer__right` - Right section (version info, links) - stays anchored right
|
|
184
|
+
- `.pa-footer__right--vertical` - Stack items vertically with right-aligned text
|
|
185
|
+
|
|
129
186
|
### Forms
|
|
130
187
|
- `.pa-input` - Text inputs
|
|
131
188
|
- `.pa-select` - Select dropdowns
|
|
@@ -171,6 +228,74 @@ The Dark theme supports color accent variants:
|
|
|
171
228
|
- `.pa-popover--sm/md/lg` - Sizes
|
|
172
229
|
- **JavaScript Required**: Popovers require `tooltips-popovers.js` and Floating UI library for positioning
|
|
173
230
|
|
|
231
|
+
### Tabs
|
|
232
|
+
- `.pa-tabs` - Base tabs container
|
|
233
|
+
- `.pa-tabs__item` - Tab button
|
|
234
|
+
- `.pa-tabs__item--active` - Active tab state
|
|
235
|
+
- `.pa-tabs__content` - Content wrapper
|
|
236
|
+
- `.pa-tabs__panel` - Tab panel (use `--active` to show)
|
|
237
|
+
- **Variants:**
|
|
238
|
+
- `.pa-tabs--pills` - Pill-style tabs
|
|
239
|
+
- `.pa-tabs--boxed` - Boxed tabs with background
|
|
240
|
+
- `.pa-tabs--vertical` - Vertical tab layout
|
|
241
|
+
- `.pa-tabs--scrollable` - Horizontally scrollable with arrows
|
|
242
|
+
- `.pa-tabs--collapse` - Icon-only tabs (active shows text)
|
|
243
|
+
- `.pa-tabs--full` - Full-width tabs
|
|
244
|
+
- `.pa-tabs--border-top` - Active indicator on top
|
|
245
|
+
- `.pa-tabs--centered` - Center-aligned tabs
|
|
246
|
+
- `.pa-tabs--nowrap` - Prevent wrapping
|
|
247
|
+
- **Sizes:** `.pa-tabs--sm`, `.pa-tabs--lg`
|
|
248
|
+
- **Containers:**
|
|
249
|
+
- `.pa-tabs__container--bordered` - Card-like border wrapper
|
|
250
|
+
- `.pa-tabs__container--card` - Card header style
|
|
251
|
+
- `.pa-tabs__vertical-layout` - Wrapper for vertical tabs + content
|
|
252
|
+
|
|
253
|
+
### Pagers
|
|
254
|
+
- `.pa-pager` - Pagination container
|
|
255
|
+
- `.pa-pager__container` - Inner container with controls and info
|
|
256
|
+
- `.pa-pager__controls` - Navigation buttons wrapper
|
|
257
|
+
- `.pa-pager__info` - Page info display
|
|
258
|
+
- `.pa-pager__input` - Page number input
|
|
259
|
+
- `.pa-pager__text` - Text labels
|
|
260
|
+
- `.pa-pager--left/center/right` - Alignment modifiers
|
|
261
|
+
|
|
262
|
+
### Load More
|
|
263
|
+
- `.pa-load-more` - Load more container
|
|
264
|
+
- `.pa-load-more__button` - Load more button
|
|
265
|
+
- `.pa-load-more__button--loading` - Loading state
|
|
266
|
+
- `.pa-load-more__spinner` - Loading spinner
|
|
267
|
+
- `.pa-load-more__text` - Button text
|
|
268
|
+
- `.pa-load-more__count` - Item count display
|
|
269
|
+
- `.pa-load-more--left/center/right` - Alignment modifiers
|
|
270
|
+
|
|
271
|
+
### Statistics
|
|
272
|
+
- `.pa-stat` - Base statistics component
|
|
273
|
+
- `.pa-stat__icon` - Icon container with color variants (`--primary/success/warning/info`)
|
|
274
|
+
- `.pa-stat__content` - Content wrapper
|
|
275
|
+
- `.pa-stat__number` - Large number display
|
|
276
|
+
- `.pa-stat__label` - Label text
|
|
277
|
+
- **Hero variant:** `.pa-stat--hero` - Large centered stat with value and change indicator
|
|
278
|
+
- `.pa-stat__value` - Hero number
|
|
279
|
+
- `.pa-stat__change` - Change indicator (`--positive/negative/neutral`)
|
|
280
|
+
- **Square variant:** `.pa-stat--square` - Colored square KPI card
|
|
281
|
+
- `.pa-stat__symbol` - Background symbol
|
|
282
|
+
- Color modifiers: `.pa-stat--primary/success/info/warning/danger/secondary`
|
|
283
|
+
- `.pa-kpi-grid` - Grid container for square stats
|
|
284
|
+
|
|
285
|
+
### Notifications
|
|
286
|
+
- `.pa-notifications` - Notification bell container
|
|
287
|
+
- `.pa-notifications__btn` - Bell button
|
|
288
|
+
- `.pa-notifications__icon` - Bell icon
|
|
289
|
+
- `.pa-notifications__badge` - Unread count badge
|
|
290
|
+
- `.pa-notifications__panel` - Dropdown panel (add `.is-open` to show)
|
|
291
|
+
- `.pa-notifications__header` - Panel header
|
|
292
|
+
- `.pa-notifications__list` - Notification list
|
|
293
|
+
- `.pa-notifications__item` - Individual notification (`--unread` for unread state)
|
|
294
|
+
- `.pa-notifications__icon-wrapper` - Item icon with variants (`--primary/success/warning/danger/secondary`)
|
|
295
|
+
- `.pa-notifications__content` - Item content (title, message)
|
|
296
|
+
- `.pa-notifications__time` - Timestamp
|
|
297
|
+
- `.pa-notifications__footer` - Panel footer with "View all" link
|
|
298
|
+
|
|
174
299
|
### Profile Panel
|
|
175
300
|
- `.pa-profile-panel` - Slide-in profile panel
|
|
176
301
|
- `.pa-profile-panel--open` - Open state
|
|
@@ -181,6 +306,29 @@ The Dark theme supports color accent variants:
|
|
|
181
306
|
- `.pa-profile-panel__favorite-item` - Favorite link (with remove button)
|
|
182
307
|
- `.pa-profile-panel__actions` - Action buttons (Sign Out, etc.)
|
|
183
308
|
|
|
309
|
+
## Utility Classes
|
|
310
|
+
|
|
311
|
+
### Flexbox Alignment
|
|
312
|
+
- `.self-start` - Align item to top (`align-self: flex-start`)
|
|
313
|
+
- `.self-center` - Align item to center (`align-self: center`)
|
|
314
|
+
- `.self-end` - Align item to bottom (`align-self: flex-end`)
|
|
315
|
+
- `.self-stretch` - Stretch item to fill (`align-self: stretch`)
|
|
316
|
+
- `.self-baseline` - Align item to baseline (`align-self: baseline`)
|
|
317
|
+
|
|
318
|
+
### Spacing (Gap)
|
|
319
|
+
- `.gap-0` through `.gap-2xl` - Gap utilities using spacing scale
|
|
320
|
+
- `.gap-1` through `.gap-20` - Numeric gap utilities (in px-equivalent rem units)
|
|
321
|
+
- `.row-gap-*` - Row gap utilities
|
|
322
|
+
- `.column-gap-*` - Column gap utilities
|
|
323
|
+
|
|
324
|
+
### Text Size
|
|
325
|
+
- `.text-2xs` through `.text-4xl` - Font size utilities
|
|
326
|
+
|
|
327
|
+
### Theme Colors
|
|
328
|
+
- `.pa-bg-color-1` through `.pa-bg-color-9` - Background color slots
|
|
329
|
+
- `.pa-text-color-1` through `.pa-text-color-9` - Text color slots
|
|
330
|
+
- `.pa-border-color-1` through `.pa-border-color-9` - Border color slots
|
|
331
|
+
|
|
184
332
|
## SCSS Variables
|
|
185
333
|
|
|
186
334
|
All components use SCSS variables with `!default` flags, making them fully customizable:
|