@keenmate/pure-admin-core 1.2.0 → 1.4.0
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 +40 -1
- package/dist/css/main.css +1367 -515
- package/package.json +1 -1
- package/src/scss/_base-css-variables.scss +1 -0
- package/src/scss/_core.scss +7 -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/_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 +347 -0
- package/src/scss/core-components/_detail-panel.scss +38 -26
- package/src/scss/core-components/_file-selector.scss +2 -2
- package/src/scss/core-components/_grid.scss +13 -20
- 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 +295 -22
- 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 +56 -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/_components.scss +27 -0
package/README.md
CHANGED
|
@@ -113,6 +113,30 @@ document.body.dataset.theme = 'dark'; // or 'light'
|
|
|
113
113
|
```
|
|
114
114
|
This enables dark mode support for web components like `@keenmate/web-grid` that look for `data-theme` attribute.
|
|
115
115
|
|
|
116
|
+
### RTL (Right-to-Left) Support
|
|
117
|
+
|
|
118
|
+
Pure Admin fully supports RTL languages (Arabic, Hebrew, Persian, etc.) using CSS Logical Properties. Simply add `dir="rtl"` to your HTML element:
|
|
119
|
+
|
|
120
|
+
```html
|
|
121
|
+
<html dir="rtl" lang="he">
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
All components automatically mirror:
|
|
125
|
+
- Sidebar appears on the right
|
|
126
|
+
- Text aligns to the right
|
|
127
|
+
- Margins/paddings flip appropriately
|
|
128
|
+
- Animations slide from the correct direction
|
|
129
|
+
|
|
130
|
+
**Logical spacing utilities** for RTL-aware layouts:
|
|
131
|
+
- `.ms-{size}` — margin-inline-start (left in LTR, right in RTL)
|
|
132
|
+
- `.me-{size}` — margin-inline-end (right in LTR, left in RTL)
|
|
133
|
+
- `.ps-{size}` — padding-inline-start
|
|
134
|
+
- `.pe-{size}` — padding-inline-end
|
|
135
|
+
- `.text-start` — aligns to start (left in LTR, right in RTL)
|
|
136
|
+
- `.text-end` — aligns to end (right in LTR, left in RTL)
|
|
137
|
+
|
|
138
|
+
Sizes: `0`, `xs`, `sm`, `md`, `base`, `lg`, `xl`, `2xl`, `auto`
|
|
139
|
+
|
|
116
140
|
## Component Classes
|
|
117
141
|
|
|
118
142
|
### Grid System
|
|
@@ -206,9 +230,24 @@ This enables dark mode support for web components like `@keenmate/web-grid` that
|
|
|
206
230
|
### Tables
|
|
207
231
|
- `.pa-table` - Base table
|
|
208
232
|
- `.pa-table--striped` - Striped rows
|
|
233
|
+
- `.pa-table--bordered` - Full cell borders on all sides
|
|
209
234
|
- `.pa-table--hover` - Row hover effects
|
|
210
235
|
- `.pa-table--compact` - Reduced padding
|
|
211
236
|
|
|
237
|
+
### Table Cards
|
|
238
|
+
Card container specifically designed for tables and web-grids:
|
|
239
|
+
- `.pa-table-card` - Base table card container
|
|
240
|
+
- `.pa-table-card__header` - Header with title and actions
|
|
241
|
+
- `.pa-table-card__body` - Body for table/grid content (no padding)
|
|
242
|
+
- `.pa-table-card__footer` - Footer with summary/actions
|
|
243
|
+
- `.pa-table-card__title` - Title element
|
|
244
|
+
- `.pa-table-card__actions` - Actions container for buttons
|
|
245
|
+
- **Semantic variants:** `.pa-table-card--primary/success/danger/warning`
|
|
246
|
+
- **Theme color variants:** `.pa-table-card--color-1` through `.pa-table-card--color-9`
|
|
247
|
+
- **Plain variant:** `.pa-table-card--plain` - No border/shadow/background, keeps grid behavior
|
|
248
|
+
|
|
249
|
+
Works with both `pa-table` and `web-grid` component. First/last columns automatically align with header/footer padding.
|
|
250
|
+
|
|
212
251
|
### Alerts
|
|
213
252
|
- `.pa-alert` - Base alert
|
|
214
253
|
- `.pa-alert--primary/success/danger/warning/info` - Variants
|
|
@@ -230,7 +269,7 @@ This enables dark mode support for web components like `@keenmate/web-grid` that
|
|
|
230
269
|
### Toasts
|
|
231
270
|
- `.pa-toast` - Base toast
|
|
232
271
|
- `.pa-toast--primary/success/danger/warning/info` - Variants
|
|
233
|
-
- Positions: `top-
|
|
272
|
+
- Positions (RTL-aware): `top-end`, `top-center`, `top-start`, `bottom-end`, `bottom-center`, `bottom-start`
|
|
234
273
|
|
|
235
274
|
### Tooltips & Popovers
|
|
236
275
|
- `.pa-tooltip` - Base tooltip (pure CSS, no JS required)
|