@keenmate/pure-admin-core 1.0.0-rc04 → 1.0.0-rc05
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 +92 -0
- package/dist/css/main.css +375 -20
- package/package.json +1 -1
- 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 +119 -0
- package/src/scss/core-components/_tooltips.scss +40 -0
- package/src/scss/core-components/forms/_form-inputs.scss +7 -1
- package/src/scss/themes/audi-light.scss +5 -1
- package/src/scss/themes/audi.scss +5 -3
- package/src/scss/variables/_components.scss +51 -12
package/README.md
CHANGED
|
@@ -106,6 +106,30 @@ The Dark theme supports color accent variants:
|
|
|
106
106
|
|
|
107
107
|
## Component Classes
|
|
108
108
|
|
|
109
|
+
### Grid System
|
|
110
|
+
- `.pa-row` - Flex container for columns
|
|
111
|
+
- `.pa-col` - Auto-equal width column (flex: 1)
|
|
112
|
+
- `.pa-col-auto` - Content-based width
|
|
113
|
+
- **Percentage columns (5% increments):** `.pa-col-5`, `.pa-col-10`, ... `.pa-col-100`
|
|
114
|
+
- **Fraction columns:**
|
|
115
|
+
- `.pa-col-1-2` (50%), `.pa-col-1-3` (33.3%), `.pa-col-2-3` (66.7%)
|
|
116
|
+
- `.pa-col-1-4` (25%), `.pa-col-3-4` (75%)
|
|
117
|
+
- `.pa-col-1-5` (20%), `.pa-col-2-5` (40%), `.pa-col-3-5` (60%), `.pa-col-4-5` (80%)
|
|
118
|
+
- `.pa-col-1-6` (16.7%), `.pa-col-5-6` (83.3%)
|
|
119
|
+
- `.pa-col-1-12` (8.3%), `.pa-col-5-12` (41.7%), `.pa-col-7-12` (58.3%), `.pa-col-11-12` (91.7%)
|
|
120
|
+
- **Responsive breakpoints:** `.pa-col-sm-*`, `.pa-col-md-*`, `.pa-col-lg-*`, `.pa-col-xl-*`
|
|
121
|
+
- **Offsets:** `.pa-offset-5`, `.pa-offset-10`, ... `.pa-offset-95`
|
|
122
|
+
- **Row modifiers:**
|
|
123
|
+
- `.pa-row--no-gutter` - Remove column gutters
|
|
124
|
+
- `.pa-row--center` - Center columns horizontally
|
|
125
|
+
- `.pa-row--end` - Align columns to end
|
|
126
|
+
- `.pa-row--between` - Space between columns
|
|
127
|
+
- `.pa-row--around` - Space around columns
|
|
128
|
+
- `.pa-row--top` - Align columns to top
|
|
129
|
+
- `.pa-row--middle` - Align columns to middle
|
|
130
|
+
- `.pa-row--bottom` - Align columns to bottom
|
|
131
|
+
- `.pa-row--stretch` - Stretch columns to equal height
|
|
132
|
+
|
|
109
133
|
### Buttons
|
|
110
134
|
- `.pa-btn` - Base button
|
|
111
135
|
- `.pa-btn--primary/secondary/success/danger/warning/info` - Variants
|
|
@@ -171,6 +195,74 @@ The Dark theme supports color accent variants:
|
|
|
171
195
|
- `.pa-popover--sm/md/lg` - Sizes
|
|
172
196
|
- **JavaScript Required**: Popovers require `tooltips-popovers.js` and Floating UI library for positioning
|
|
173
197
|
|
|
198
|
+
### Tabs
|
|
199
|
+
- `.pa-tabs` - Base tabs container
|
|
200
|
+
- `.pa-tabs__item` - Tab button
|
|
201
|
+
- `.pa-tabs__item--active` - Active tab state
|
|
202
|
+
- `.pa-tabs__content` - Content wrapper
|
|
203
|
+
- `.pa-tabs__panel` - Tab panel (use `--active` to show)
|
|
204
|
+
- **Variants:**
|
|
205
|
+
- `.pa-tabs--pills` - Pill-style tabs
|
|
206
|
+
- `.pa-tabs--boxed` - Boxed tabs with background
|
|
207
|
+
- `.pa-tabs--vertical` - Vertical tab layout
|
|
208
|
+
- `.pa-tabs--scrollable` - Horizontally scrollable with arrows
|
|
209
|
+
- `.pa-tabs--collapse` - Icon-only tabs (active shows text)
|
|
210
|
+
- `.pa-tabs--full` - Full-width tabs
|
|
211
|
+
- `.pa-tabs--border-top` - Active indicator on top
|
|
212
|
+
- `.pa-tabs--centered` - Center-aligned tabs
|
|
213
|
+
- `.pa-tabs--nowrap` - Prevent wrapping
|
|
214
|
+
- **Sizes:** `.pa-tabs--sm`, `.pa-tabs--lg`
|
|
215
|
+
- **Containers:**
|
|
216
|
+
- `.pa-tabs__container--bordered` - Card-like border wrapper
|
|
217
|
+
- `.pa-tabs__container--card` - Card header style
|
|
218
|
+
- `.pa-tabs__vertical-layout` - Wrapper for vertical tabs + content
|
|
219
|
+
|
|
220
|
+
### Pagers
|
|
221
|
+
- `.pa-pager` - Pagination container
|
|
222
|
+
- `.pa-pager__container` - Inner container with controls and info
|
|
223
|
+
- `.pa-pager__controls` - Navigation buttons wrapper
|
|
224
|
+
- `.pa-pager__info` - Page info display
|
|
225
|
+
- `.pa-pager__input` - Page number input
|
|
226
|
+
- `.pa-pager__text` - Text labels
|
|
227
|
+
- `.pa-pager--left/center/right` - Alignment modifiers
|
|
228
|
+
|
|
229
|
+
### Load More
|
|
230
|
+
- `.pa-load-more` - Load more container
|
|
231
|
+
- `.pa-load-more__button` - Load more button
|
|
232
|
+
- `.pa-load-more__button--loading` - Loading state
|
|
233
|
+
- `.pa-load-more__spinner` - Loading spinner
|
|
234
|
+
- `.pa-load-more__text` - Button text
|
|
235
|
+
- `.pa-load-more__count` - Item count display
|
|
236
|
+
- `.pa-load-more--left/center/right` - Alignment modifiers
|
|
237
|
+
|
|
238
|
+
### Statistics
|
|
239
|
+
- `.pa-stat` - Base statistics component
|
|
240
|
+
- `.pa-stat__icon` - Icon container with color variants (`--primary/success/warning/info`)
|
|
241
|
+
- `.pa-stat__content` - Content wrapper
|
|
242
|
+
- `.pa-stat__number` - Large number display
|
|
243
|
+
- `.pa-stat__label` - Label text
|
|
244
|
+
- **Hero variant:** `.pa-stat--hero` - Large centered stat with value and change indicator
|
|
245
|
+
- `.pa-stat__value` - Hero number
|
|
246
|
+
- `.pa-stat__change` - Change indicator (`--positive/negative/neutral`)
|
|
247
|
+
- **Square variant:** `.pa-stat--square` - Colored square KPI card
|
|
248
|
+
- `.pa-stat__symbol` - Background symbol
|
|
249
|
+
- Color modifiers: `.pa-stat--primary/success/info/warning/danger/secondary`
|
|
250
|
+
- `.pa-kpi-grid` - Grid container for square stats
|
|
251
|
+
|
|
252
|
+
### Notifications
|
|
253
|
+
- `.pa-notifications` - Notification bell container
|
|
254
|
+
- `.pa-notifications__btn` - Bell button
|
|
255
|
+
- `.pa-notifications__icon` - Bell icon
|
|
256
|
+
- `.pa-notifications__badge` - Unread count badge
|
|
257
|
+
- `.pa-notifications__panel` - Dropdown panel (add `.is-open` to show)
|
|
258
|
+
- `.pa-notifications__header` - Panel header
|
|
259
|
+
- `.pa-notifications__list` - Notification list
|
|
260
|
+
- `.pa-notifications__item` - Individual notification (`--unread` for unread state)
|
|
261
|
+
- `.pa-notifications__icon-wrapper` - Item icon with variants (`--primary/success/warning/danger/secondary`)
|
|
262
|
+
- `.pa-notifications__content` - Item content (title, message)
|
|
263
|
+
- `.pa-notifications__time` - Timestamp
|
|
264
|
+
- `.pa-notifications__footer` - Panel footer with "View all" link
|
|
265
|
+
|
|
174
266
|
### Profile Panel
|
|
175
267
|
- `.pa-profile-panel` - Slide-in profile panel
|
|
176
268
|
- `.pa-profile-panel--open` - Open state
|
package/dist/css/main.css
CHANGED
|
@@ -4310,7 +4310,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
|
|
|
4310
4310
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
4311
4311
|
}
|
|
4312
4312
|
.pa-card__header {
|
|
4313
|
-
padding: 0.
|
|
4313
|
+
padding: 0.5rem 1rem;
|
|
4314
4314
|
min-height: 4rem;
|
|
4315
4315
|
border-top-left-radius: 8px;
|
|
4316
4316
|
border-top-right-radius: 8px;
|
|
@@ -4347,6 +4347,10 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
|
|
|
4347
4347
|
color: var(--pa-text-primary);
|
|
4348
4348
|
font-size: 1.6rem;
|
|
4349
4349
|
}
|
|
4350
|
+
.pa-card__header .pa-btn {
|
|
4351
|
+
margin-top: -0.25rem;
|
|
4352
|
+
margin-bottom: -0.25rem;
|
|
4353
|
+
}
|
|
4350
4354
|
.pa-card__title {
|
|
4351
4355
|
display: flex;
|
|
4352
4356
|
align-items: center;
|
|
@@ -4493,6 +4497,31 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
|
|
|
4493
4497
|
.pa-card__tab-content--active {
|
|
4494
4498
|
display: block;
|
|
4495
4499
|
}
|
|
4500
|
+
.pa-card__tabs--inline {
|
|
4501
|
+
display: flex;
|
|
4502
|
+
gap: 0.4rem;
|
|
4503
|
+
margin: -0.5rem 0;
|
|
4504
|
+
border-bottom: none;
|
|
4505
|
+
background: none;
|
|
4506
|
+
}
|
|
4507
|
+
.pa-card__tabs--inline .pa-card__tab {
|
|
4508
|
+
padding: 0.3rem 0.8rem;
|
|
4509
|
+
border: none;
|
|
4510
|
+
border-radius: 4px;
|
|
4511
|
+
font-size: 1.4rem;
|
|
4512
|
+
background: transparent;
|
|
4513
|
+
color: var(--pa-text-secondary);
|
|
4514
|
+
cursor: pointer;
|
|
4515
|
+
transition: all 0.1s ease-out;
|
|
4516
|
+
}
|
|
4517
|
+
.pa-card__tabs--inline .pa-card__tab:hover {
|
|
4518
|
+
background-color: rgba(0, 123, 255, 0.05);
|
|
4519
|
+
color: var(--pa-text-primary);
|
|
4520
|
+
}
|
|
4521
|
+
.pa-card__tabs--inline .pa-card__tab--active {
|
|
4522
|
+
background: var(--pa-accent);
|
|
4523
|
+
color: var(--pa-btn-primary-text);
|
|
4524
|
+
}
|
|
4496
4525
|
|
|
4497
4526
|
a.pa-card {
|
|
4498
4527
|
text-decoration: none;
|
|
@@ -4775,6 +4804,107 @@ a.pa-card p {
|
|
|
4775
4804
|
.pa-tabs__container--bordered .pa-tabs__content {
|
|
4776
4805
|
padding-top: 1.2rem;
|
|
4777
4806
|
}
|
|
4807
|
+
.pa-tabs__container--card {
|
|
4808
|
+
position: relative;
|
|
4809
|
+
border: 1px solid var(--pa-border-color);
|
|
4810
|
+
border-radius: 8px;
|
|
4811
|
+
background-color: var(--pa-card-bg);
|
|
4812
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
4813
|
+
}
|
|
4814
|
+
.pa-tabs__container--card .pa-tabs {
|
|
4815
|
+
height: 4rem;
|
|
4816
|
+
padding: 0.5rem 1rem;
|
|
4817
|
+
background: var(--pa-card-header-bg);
|
|
4818
|
+
border-bottom: 1px solid var(--pa-border-color);
|
|
4819
|
+
box-sizing: border-box;
|
|
4820
|
+
border-top-left-radius: 8px;
|
|
4821
|
+
border-top-right-radius: 8px;
|
|
4822
|
+
margin-bottom: 0;
|
|
4823
|
+
align-items: center;
|
|
4824
|
+
gap: 0.4rem;
|
|
4825
|
+
flex-wrap: nowrap;
|
|
4826
|
+
overflow: visible;
|
|
4827
|
+
}
|
|
4828
|
+
.pa-tabs__container--card .pa-tabs__content {
|
|
4829
|
+
padding: 1.6rem 1rem;
|
|
4830
|
+
}
|
|
4831
|
+
.pa-tabs__container--card .pa-tabs__panel {
|
|
4832
|
+
padding-top: 0;
|
|
4833
|
+
}
|
|
4834
|
+
.pa-tabs__container--card .pa-tabs__overflow {
|
|
4835
|
+
position: relative;
|
|
4836
|
+
margin-left: auto;
|
|
4837
|
+
flex-shrink: 0;
|
|
4838
|
+
}
|
|
4839
|
+
.pa-tabs__container--card .pa-tabs__overflow-toggle {
|
|
4840
|
+
position: relative;
|
|
4841
|
+
display: flex;
|
|
4842
|
+
align-items: center;
|
|
4843
|
+
justify-content: center;
|
|
4844
|
+
width: 4rem;
|
|
4845
|
+
height: 100%;
|
|
4846
|
+
padding: 0;
|
|
4847
|
+
border: none;
|
|
4848
|
+
background: transparent;
|
|
4849
|
+
color: var(--pa-text-secondary);
|
|
4850
|
+
cursor: pointer;
|
|
4851
|
+
transition: all 0.1s ease-out;
|
|
4852
|
+
border-left: 1px solid var(--pa-border-color);
|
|
4853
|
+
margin: -0.5rem -1rem -0.5rem 0;
|
|
4854
|
+
box-sizing: content-box;
|
|
4855
|
+
height: 4rem;
|
|
4856
|
+
}
|
|
4857
|
+
.pa-tabs__container--card .pa-tabs__overflow-toggle:hover {
|
|
4858
|
+
background-color: rgba(0, 123, 255, 0.05);
|
|
4859
|
+
color: var(--pa-text-primary);
|
|
4860
|
+
}
|
|
4861
|
+
.pa-tabs__container--card .pa-tabs__overflow-toggle--has-active {
|
|
4862
|
+
color: var(--pa-accent);
|
|
4863
|
+
}
|
|
4864
|
+
.pa-tabs__container--card .pa-tabs__overflow-toggle--has-active::after {
|
|
4865
|
+
content: "";
|
|
4866
|
+
position: absolute;
|
|
4867
|
+
bottom: 0;
|
|
4868
|
+
left: 0;
|
|
4869
|
+
right: 0;
|
|
4870
|
+
height: 2px;
|
|
4871
|
+
background: var(--pa-accent);
|
|
4872
|
+
}
|
|
4873
|
+
.pa-tabs__container--card .pa-tabs__overflow-toggle i {
|
|
4874
|
+
font-size: 1.4rem;
|
|
4875
|
+
}
|
|
4876
|
+
.pa-tabs__container--card .pa-tabs__overflow-menu {
|
|
4877
|
+
position: absolute;
|
|
4878
|
+
top: 4rem;
|
|
4879
|
+
right: 0;
|
|
4880
|
+
min-width: 15rem;
|
|
4881
|
+
background: var(--pa-card-bg);
|
|
4882
|
+
border: 1px solid var(--pa-border-color);
|
|
4883
|
+
border-radius: 4px;
|
|
4884
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
4885
|
+
z-index: 1000;
|
|
4886
|
+
display: none;
|
|
4887
|
+
flex-direction: column;
|
|
4888
|
+
padding: 0.4rem 0;
|
|
4889
|
+
}
|
|
4890
|
+
.pa-tabs__container--card .pa-tabs__overflow-menu--open {
|
|
4891
|
+
display: flex;
|
|
4892
|
+
}
|
|
4893
|
+
.pa-tabs__container--card .pa-tabs__overflow-menu .pa-tabs__item {
|
|
4894
|
+
padding: 0.8rem 1.6rem;
|
|
4895
|
+
border: none;
|
|
4896
|
+
border-bottom: none;
|
|
4897
|
+
border-radius: 0;
|
|
4898
|
+
text-align: left;
|
|
4899
|
+
white-space: nowrap;
|
|
4900
|
+
}
|
|
4901
|
+
.pa-tabs__container--card .pa-tabs__overflow-menu .pa-tabs__item:hover {
|
|
4902
|
+
background-color: rgba(0, 123, 255, 0.05);
|
|
4903
|
+
}
|
|
4904
|
+
.pa-tabs__container--card .pa-tabs__overflow-menu .pa-tabs__item--active {
|
|
4905
|
+
background-color: rgba(0, 123, 255, 0.1);
|
|
4906
|
+
border-bottom: none;
|
|
4907
|
+
}
|
|
4778
4908
|
.pa-tabs__vertical-layout {
|
|
4779
4909
|
display: flex;
|
|
4780
4910
|
gap: 1.6rem;
|
|
@@ -5112,8 +5242,8 @@ a.pa-card p {
|
|
|
5112
5242
|
background-color: var(--pa-primary-bg);
|
|
5113
5243
|
}
|
|
5114
5244
|
.pa-list__avatar {
|
|
5115
|
-
width:
|
|
5116
|
-
height:
|
|
5245
|
+
width: 3.5rem;
|
|
5246
|
+
height: 3.5rem;
|
|
5117
5247
|
border-radius: 50%;
|
|
5118
5248
|
background-color: var(--pa-primary-bg);
|
|
5119
5249
|
display: flex;
|
|
@@ -5783,6 +5913,7 @@ a.pa-card p {
|
|
|
5783
5913
|
======================================== */
|
|
5784
5914
|
.pa-btn {
|
|
5785
5915
|
display: inline-block;
|
|
5916
|
+
height: 3.5rem;
|
|
5786
5917
|
padding: 0.8rem 1.2rem;
|
|
5787
5918
|
border: 1px solid transparent;
|
|
5788
5919
|
border-radius: 4px;
|
|
@@ -5817,18 +5948,22 @@ a.pa-card p {
|
|
|
5817
5948
|
border-color: var(--pa-accent);
|
|
5818
5949
|
}
|
|
5819
5950
|
.pa-btn--xs {
|
|
5951
|
+
height: 3.1rem;
|
|
5820
5952
|
padding: 0.6rem 0.8rem;
|
|
5821
5953
|
font-size: 1.2rem;
|
|
5822
5954
|
}
|
|
5823
5955
|
.pa-btn--sm {
|
|
5956
|
+
height: 3.3rem;
|
|
5824
5957
|
padding: 0.8rem 1rem;
|
|
5825
5958
|
font-size: 1.4rem;
|
|
5826
5959
|
}
|
|
5827
5960
|
.pa-btn--lg {
|
|
5961
|
+
height: 3.8rem;
|
|
5828
5962
|
padding: 0.8rem 1.4rem;
|
|
5829
5963
|
font-size: 1.6rem;
|
|
5830
5964
|
}
|
|
5831
5965
|
.pa-btn--xl {
|
|
5966
|
+
height: 4.1rem;
|
|
5832
5967
|
padding: 0.8rem 1.6rem;
|
|
5833
5968
|
font-size: 1.8rem;
|
|
5834
5969
|
}
|
|
@@ -5989,28 +6124,29 @@ a.pa-card p {
|
|
|
5989
6124
|
display: block;
|
|
5990
6125
|
}
|
|
5991
6126
|
.pa-btn--icon-only {
|
|
5992
|
-
width:
|
|
5993
|
-
height:
|
|
6127
|
+
width: 3.5rem;
|
|
6128
|
+
height: 3.5rem;
|
|
5994
6129
|
padding: 0;
|
|
5995
6130
|
display: flex;
|
|
5996
6131
|
align-items: center;
|
|
5997
6132
|
justify-content: center;
|
|
6133
|
+
line-height: 1;
|
|
5998
6134
|
}
|
|
5999
6135
|
.pa-btn--icon-only.pa-btn--xs {
|
|
6000
|
-
width:
|
|
6001
|
-
height:
|
|
6136
|
+
width: 3.1rem;
|
|
6137
|
+
height: 3.1rem;
|
|
6002
6138
|
}
|
|
6003
6139
|
.pa-btn--icon-only.pa-btn--sm {
|
|
6004
|
-
width: 3.
|
|
6005
|
-
height: 3.
|
|
6140
|
+
width: 3.3rem;
|
|
6141
|
+
height: 3.3rem;
|
|
6006
6142
|
}
|
|
6007
6143
|
.pa-btn--icon-only.pa-btn--lg {
|
|
6008
|
-
width:
|
|
6009
|
-
height:
|
|
6144
|
+
width: 3.8rem;
|
|
6145
|
+
height: 3.8rem;
|
|
6010
6146
|
}
|
|
6011
6147
|
.pa-btn--icon-only.pa-btn--xl {
|
|
6012
|
-
width:
|
|
6013
|
-
height:
|
|
6148
|
+
width: 4.1rem;
|
|
6149
|
+
height: 4.1rem;
|
|
6014
6150
|
}
|
|
6015
6151
|
.pa-btn__icon {
|
|
6016
6152
|
margin-right: 0.8rem;
|
|
@@ -6566,6 +6702,168 @@ a.pa-card p {
|
|
|
6566
6702
|
border-top-color: transparent;
|
|
6567
6703
|
border-left-color: var(--pa-btn-danger-bg);
|
|
6568
6704
|
}
|
|
6705
|
+
.pa-tooltip--color-1::before {
|
|
6706
|
+
background-color: var(--pa-color-1);
|
|
6707
|
+
}
|
|
6708
|
+
.pa-tooltip--color-1::after {
|
|
6709
|
+
border-top-color: var(--pa-color-1);
|
|
6710
|
+
}
|
|
6711
|
+
.pa-tooltip--color-1.pa-tooltip--right::after {
|
|
6712
|
+
border-top-color: transparent;
|
|
6713
|
+
border-right-color: var(--pa-color-1);
|
|
6714
|
+
}
|
|
6715
|
+
.pa-tooltip--color-1.pa-tooltip--bottom::after {
|
|
6716
|
+
border-top-color: transparent;
|
|
6717
|
+
border-bottom-color: var(--pa-color-1);
|
|
6718
|
+
}
|
|
6719
|
+
.pa-tooltip--color-1.pa-tooltip--left::after {
|
|
6720
|
+
border-top-color: transparent;
|
|
6721
|
+
border-left-color: var(--pa-color-1);
|
|
6722
|
+
}
|
|
6723
|
+
.pa-tooltip--color-2::before {
|
|
6724
|
+
background-color: var(--pa-color-2);
|
|
6725
|
+
}
|
|
6726
|
+
.pa-tooltip--color-2::after {
|
|
6727
|
+
border-top-color: var(--pa-color-2);
|
|
6728
|
+
}
|
|
6729
|
+
.pa-tooltip--color-2.pa-tooltip--right::after {
|
|
6730
|
+
border-top-color: transparent;
|
|
6731
|
+
border-right-color: var(--pa-color-2);
|
|
6732
|
+
}
|
|
6733
|
+
.pa-tooltip--color-2.pa-tooltip--bottom::after {
|
|
6734
|
+
border-top-color: transparent;
|
|
6735
|
+
border-bottom-color: var(--pa-color-2);
|
|
6736
|
+
}
|
|
6737
|
+
.pa-tooltip--color-2.pa-tooltip--left::after {
|
|
6738
|
+
border-top-color: transparent;
|
|
6739
|
+
border-left-color: var(--pa-color-2);
|
|
6740
|
+
}
|
|
6741
|
+
.pa-tooltip--color-3::before {
|
|
6742
|
+
background-color: var(--pa-color-3);
|
|
6743
|
+
}
|
|
6744
|
+
.pa-tooltip--color-3::after {
|
|
6745
|
+
border-top-color: var(--pa-color-3);
|
|
6746
|
+
}
|
|
6747
|
+
.pa-tooltip--color-3.pa-tooltip--right::after {
|
|
6748
|
+
border-top-color: transparent;
|
|
6749
|
+
border-right-color: var(--pa-color-3);
|
|
6750
|
+
}
|
|
6751
|
+
.pa-tooltip--color-3.pa-tooltip--bottom::after {
|
|
6752
|
+
border-top-color: transparent;
|
|
6753
|
+
border-bottom-color: var(--pa-color-3);
|
|
6754
|
+
}
|
|
6755
|
+
.pa-tooltip--color-3.pa-tooltip--left::after {
|
|
6756
|
+
border-top-color: transparent;
|
|
6757
|
+
border-left-color: var(--pa-color-3);
|
|
6758
|
+
}
|
|
6759
|
+
.pa-tooltip--color-4::before {
|
|
6760
|
+
background-color: var(--pa-color-4);
|
|
6761
|
+
}
|
|
6762
|
+
.pa-tooltip--color-4::after {
|
|
6763
|
+
border-top-color: var(--pa-color-4);
|
|
6764
|
+
}
|
|
6765
|
+
.pa-tooltip--color-4.pa-tooltip--right::after {
|
|
6766
|
+
border-top-color: transparent;
|
|
6767
|
+
border-right-color: var(--pa-color-4);
|
|
6768
|
+
}
|
|
6769
|
+
.pa-tooltip--color-4.pa-tooltip--bottom::after {
|
|
6770
|
+
border-top-color: transparent;
|
|
6771
|
+
border-bottom-color: var(--pa-color-4);
|
|
6772
|
+
}
|
|
6773
|
+
.pa-tooltip--color-4.pa-tooltip--left::after {
|
|
6774
|
+
border-top-color: transparent;
|
|
6775
|
+
border-left-color: var(--pa-color-4);
|
|
6776
|
+
}
|
|
6777
|
+
.pa-tooltip--color-5::before {
|
|
6778
|
+
background-color: var(--pa-color-5);
|
|
6779
|
+
}
|
|
6780
|
+
.pa-tooltip--color-5::after {
|
|
6781
|
+
border-top-color: var(--pa-color-5);
|
|
6782
|
+
}
|
|
6783
|
+
.pa-tooltip--color-5.pa-tooltip--right::after {
|
|
6784
|
+
border-top-color: transparent;
|
|
6785
|
+
border-right-color: var(--pa-color-5);
|
|
6786
|
+
}
|
|
6787
|
+
.pa-tooltip--color-5.pa-tooltip--bottom::after {
|
|
6788
|
+
border-top-color: transparent;
|
|
6789
|
+
border-bottom-color: var(--pa-color-5);
|
|
6790
|
+
}
|
|
6791
|
+
.pa-tooltip--color-5.pa-tooltip--left::after {
|
|
6792
|
+
border-top-color: transparent;
|
|
6793
|
+
border-left-color: var(--pa-color-5);
|
|
6794
|
+
}
|
|
6795
|
+
.pa-tooltip--color-6::before {
|
|
6796
|
+
background-color: var(--pa-color-6);
|
|
6797
|
+
}
|
|
6798
|
+
.pa-tooltip--color-6::after {
|
|
6799
|
+
border-top-color: var(--pa-color-6);
|
|
6800
|
+
}
|
|
6801
|
+
.pa-tooltip--color-6.pa-tooltip--right::after {
|
|
6802
|
+
border-top-color: transparent;
|
|
6803
|
+
border-right-color: var(--pa-color-6);
|
|
6804
|
+
}
|
|
6805
|
+
.pa-tooltip--color-6.pa-tooltip--bottom::after {
|
|
6806
|
+
border-top-color: transparent;
|
|
6807
|
+
border-bottom-color: var(--pa-color-6);
|
|
6808
|
+
}
|
|
6809
|
+
.pa-tooltip--color-6.pa-tooltip--left::after {
|
|
6810
|
+
border-top-color: transparent;
|
|
6811
|
+
border-left-color: var(--pa-color-6);
|
|
6812
|
+
}
|
|
6813
|
+
.pa-tooltip--color-7::before {
|
|
6814
|
+
background-color: var(--pa-color-7);
|
|
6815
|
+
}
|
|
6816
|
+
.pa-tooltip--color-7::after {
|
|
6817
|
+
border-top-color: var(--pa-color-7);
|
|
6818
|
+
}
|
|
6819
|
+
.pa-tooltip--color-7.pa-tooltip--right::after {
|
|
6820
|
+
border-top-color: transparent;
|
|
6821
|
+
border-right-color: var(--pa-color-7);
|
|
6822
|
+
}
|
|
6823
|
+
.pa-tooltip--color-7.pa-tooltip--bottom::after {
|
|
6824
|
+
border-top-color: transparent;
|
|
6825
|
+
border-bottom-color: var(--pa-color-7);
|
|
6826
|
+
}
|
|
6827
|
+
.pa-tooltip--color-7.pa-tooltip--left::after {
|
|
6828
|
+
border-top-color: transparent;
|
|
6829
|
+
border-left-color: var(--pa-color-7);
|
|
6830
|
+
}
|
|
6831
|
+
.pa-tooltip--color-8::before {
|
|
6832
|
+
background-color: var(--pa-color-8);
|
|
6833
|
+
}
|
|
6834
|
+
.pa-tooltip--color-8::after {
|
|
6835
|
+
border-top-color: var(--pa-color-8);
|
|
6836
|
+
}
|
|
6837
|
+
.pa-tooltip--color-8.pa-tooltip--right::after {
|
|
6838
|
+
border-top-color: transparent;
|
|
6839
|
+
border-right-color: var(--pa-color-8);
|
|
6840
|
+
}
|
|
6841
|
+
.pa-tooltip--color-8.pa-tooltip--bottom::after {
|
|
6842
|
+
border-top-color: transparent;
|
|
6843
|
+
border-bottom-color: var(--pa-color-8);
|
|
6844
|
+
}
|
|
6845
|
+
.pa-tooltip--color-8.pa-tooltip--left::after {
|
|
6846
|
+
border-top-color: transparent;
|
|
6847
|
+
border-left-color: var(--pa-color-8);
|
|
6848
|
+
}
|
|
6849
|
+
.pa-tooltip--color-9::before {
|
|
6850
|
+
background-color: var(--pa-color-9);
|
|
6851
|
+
}
|
|
6852
|
+
.pa-tooltip--color-9::after {
|
|
6853
|
+
border-top-color: var(--pa-color-9);
|
|
6854
|
+
}
|
|
6855
|
+
.pa-tooltip--color-9.pa-tooltip--right::after {
|
|
6856
|
+
border-top-color: transparent;
|
|
6857
|
+
border-right-color: var(--pa-color-9);
|
|
6858
|
+
}
|
|
6859
|
+
.pa-tooltip--color-9.pa-tooltip--bottom::after {
|
|
6860
|
+
border-top-color: transparent;
|
|
6861
|
+
border-bottom-color: var(--pa-color-9);
|
|
6862
|
+
}
|
|
6863
|
+
.pa-tooltip--color-9.pa-tooltip--left::after {
|
|
6864
|
+
border-top-color: transparent;
|
|
6865
|
+
border-left-color: var(--pa-color-9);
|
|
6866
|
+
}
|
|
6569
6867
|
.pa-tooltip--auto-flip-bottom::before {
|
|
6570
6868
|
bottom: auto !important;
|
|
6571
6869
|
top: calc(100% + 8px) !important;
|
|
@@ -6685,6 +6983,7 @@ a.pa-card p {
|
|
|
6685
6983
|
font-size: 1.4rem;
|
|
6686
6984
|
line-height: 1.5;
|
|
6687
6985
|
color: var(--pa-text-primary);
|
|
6986
|
+
text-align: left;
|
|
6688
6987
|
}
|
|
6689
6988
|
.pa-popover__body p {
|
|
6690
6989
|
margin: 0 0 0.8rem 0;
|
|
@@ -6738,6 +7037,12 @@ a.pa-card p {
|
|
|
6738
7037
|
min-width: 32rem;
|
|
6739
7038
|
max-width: 44.8rem;
|
|
6740
7039
|
}
|
|
7040
|
+
.pa-popover--center .pa-popover__body {
|
|
7041
|
+
text-align: center;
|
|
7042
|
+
}
|
|
7043
|
+
.pa-popover--right .pa-popover__body {
|
|
7044
|
+
text-align: right;
|
|
7045
|
+
}
|
|
6741
7046
|
|
|
6742
7047
|
.pa-tooltip-floating {
|
|
6743
7048
|
background-color: var(--pa-tooltip-bg);
|
|
@@ -6773,6 +7078,33 @@ a.pa-card p {
|
|
|
6773
7078
|
background-color: var(--pa-btn-danger-bg);
|
|
6774
7079
|
color: var(--pa-btn-danger-text);
|
|
6775
7080
|
}
|
|
7081
|
+
.pa-tooltip-floating.pa-tooltip--color-1 {
|
|
7082
|
+
background-color: var(--pa-color-1);
|
|
7083
|
+
}
|
|
7084
|
+
.pa-tooltip-floating.pa-tooltip--color-2 {
|
|
7085
|
+
background-color: var(--pa-color-2);
|
|
7086
|
+
}
|
|
7087
|
+
.pa-tooltip-floating.pa-tooltip--color-3 {
|
|
7088
|
+
background-color: var(--pa-color-3);
|
|
7089
|
+
}
|
|
7090
|
+
.pa-tooltip-floating.pa-tooltip--color-4 {
|
|
7091
|
+
background-color: var(--pa-color-4);
|
|
7092
|
+
}
|
|
7093
|
+
.pa-tooltip-floating.pa-tooltip--color-5 {
|
|
7094
|
+
background-color: var(--pa-color-5);
|
|
7095
|
+
}
|
|
7096
|
+
.pa-tooltip-floating.pa-tooltip--color-6 {
|
|
7097
|
+
background-color: var(--pa-color-6);
|
|
7098
|
+
}
|
|
7099
|
+
.pa-tooltip-floating.pa-tooltip--color-7 {
|
|
7100
|
+
background-color: var(--pa-color-7);
|
|
7101
|
+
}
|
|
7102
|
+
.pa-tooltip-floating.pa-tooltip--color-8 {
|
|
7103
|
+
background-color: var(--pa-color-8);
|
|
7104
|
+
}
|
|
7105
|
+
.pa-tooltip-floating.pa-tooltip--color-9 {
|
|
7106
|
+
background-color: var(--pa-color-9);
|
|
7107
|
+
}
|
|
6776
7108
|
|
|
6777
7109
|
/* ========================================
|
|
6778
7110
|
Reset and Base Styles
|
|
@@ -7123,6 +7455,7 @@ a.pa-card p {
|
|
|
7123
7455
|
======================================== */
|
|
7124
7456
|
.pa-input {
|
|
7125
7457
|
width: 100%;
|
|
7458
|
+
height: 3.5rem;
|
|
7126
7459
|
padding: 0.8rem 0.8rem;
|
|
7127
7460
|
border: 1px solid var(--pa-border-color);
|
|
7128
7461
|
border-radius: 4px;
|
|
@@ -7139,6 +7472,7 @@ a.pa-card p {
|
|
|
7139
7472
|
|
|
7140
7473
|
.pa-select {
|
|
7141
7474
|
width: 100%;
|
|
7475
|
+
height: 3.5rem;
|
|
7142
7476
|
padding: 0.7rem 0.5rem;
|
|
7143
7477
|
border: 1px solid var(--pa-border-color);
|
|
7144
7478
|
border-radius: 4px;
|
|
@@ -7176,24 +7510,28 @@ a.pa-card p {
|
|
|
7176
7510
|
|
|
7177
7511
|
.pa-input--xs,
|
|
7178
7512
|
.pa-select--xs {
|
|
7513
|
+
height: 3.1rem;
|
|
7179
7514
|
padding: 0.6rem 0.8rem;
|
|
7180
7515
|
font-size: 1.2rem;
|
|
7181
7516
|
}
|
|
7182
7517
|
|
|
7183
7518
|
.pa-input--sm,
|
|
7184
7519
|
.pa-select--sm {
|
|
7520
|
+
height: 3.3rem;
|
|
7185
7521
|
padding: 0.8rem 0.8rem;
|
|
7186
7522
|
font-size: 1.4rem;
|
|
7187
7523
|
}
|
|
7188
7524
|
|
|
7189
7525
|
.pa-input--lg,
|
|
7190
7526
|
.pa-select--lg {
|
|
7527
|
+
height: 3.8rem;
|
|
7191
7528
|
padding: 0.8rem 0.8rem;
|
|
7192
7529
|
font-size: 1.6rem;
|
|
7193
7530
|
}
|
|
7194
7531
|
|
|
7195
7532
|
.pa-input--xl,
|
|
7196
7533
|
.pa-select--xl {
|
|
7534
|
+
height: 4.1rem;
|
|
7197
7535
|
padding: 0.8rem 0.8rem;
|
|
7198
7536
|
font-size: 1.8rem;
|
|
7199
7537
|
}
|
|
@@ -9033,7 +9371,7 @@ web-daterangepicker {
|
|
|
9033
9371
|
}
|
|
9034
9372
|
.pa-table th,
|
|
9035
9373
|
.pa-table td {
|
|
9036
|
-
padding: 0.
|
|
9374
|
+
padding: 0.8rem 0.8rem;
|
|
9037
9375
|
text-align: left;
|
|
9038
9376
|
border-bottom: 1px solid var(--pa-border-color);
|
|
9039
9377
|
vertical-align: middle;
|
|
@@ -9048,6 +9386,7 @@ web-daterangepicker {
|
|
|
9048
9386
|
.pa-table td {
|
|
9049
9387
|
color: var(--pa-text-primary);
|
|
9050
9388
|
background-color: var(--pa-table-bg);
|
|
9389
|
+
height: 3.5rem0.8rem;
|
|
9051
9390
|
}
|
|
9052
9391
|
.pa-table td .pa-btn {
|
|
9053
9392
|
margin-top: -0.25rem;
|
|
@@ -9059,13 +9398,29 @@ web-daterangepicker {
|
|
|
9059
9398
|
.pa-table--striped tbody tr:nth-child(even) td {
|
|
9060
9399
|
background-color: var(--pa-table-stripe);
|
|
9061
9400
|
}
|
|
9062
|
-
.pa-table--
|
|
9063
|
-
.
|
|
9064
|
-
|
|
9401
|
+
.pa-table--xs th, .pa-table--xs td {
|
|
9402
|
+
padding: 0.6rem 0.8rem;
|
|
9403
|
+
}
|
|
9404
|
+
.pa-table--xs td {
|
|
9405
|
+
height: 3.1rem0.7rem;
|
|
9406
|
+
}
|
|
9407
|
+
.pa-table--sm th, .pa-table--sm td {
|
|
9408
|
+
padding: 0.8rem 1rem;
|
|
9409
|
+
}
|
|
9410
|
+
.pa-table--sm td {
|
|
9411
|
+
height: 3.3rem0.8rem;
|
|
9412
|
+
}
|
|
9413
|
+
.pa-table--lg th, .pa-table--lg td {
|
|
9414
|
+
padding: 0.8rem 1.4rem;
|
|
9415
|
+
}
|
|
9416
|
+
.pa-table--lg td {
|
|
9417
|
+
height: 3.8rem0.8rem;
|
|
9418
|
+
}
|
|
9419
|
+
.pa-table--xl th, .pa-table--xl td {
|
|
9420
|
+
padding: 0.8rem 1.6rem;
|
|
9065
9421
|
}
|
|
9066
|
-
.pa-table--
|
|
9067
|
-
.
|
|
9068
|
-
padding: 1.5rem 2.4rem;
|
|
9422
|
+
.pa-table--xl td {
|
|
9423
|
+
height: 4.1rem0.8rem;
|
|
9069
9424
|
}
|
|
9070
9425
|
.pa-table tbody tr:hover {
|
|
9071
9426
|
background-color: var(--pa-table-hover-bg);
|
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-rc05",
|
|
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": {
|