@keenmate/pure-admin-core 2.0.0 → 2.0.1

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.
Files changed (5) hide show
  1. package/dist/css/main.css +48 -1
  2. package/package.json +1 -1
  3. package/src/scss/core-components/_buttons.scss +2 -0
  4. package/src/scss/core-components/_cards.scss +61 -2
  5. package/src/scss/core-components/_grid.scss +1 -0
package/dist/css/main.css CHANGED
@@ -3631,6 +3631,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
3631
3631
  display: flex;
3632
3632
  flex-wrap: wrap;
3633
3633
  margin-inline: -0.8rem;
3634
+ row-gap: 0.8rem;
3634
3635
  }
3635
3636
  .pa-row .pa-row {
3636
3637
  margin-inline: 0;
@@ -5376,6 +5377,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
5376
5377
  .pa-card__header fieldset {
5377
5378
  margin: 0;
5378
5379
  padding: 0;
5380
+ border-bottom: none;
5379
5381
  }
5380
5382
  .pa-card__header h1,
5381
5383
  .pa-card__header h2,
@@ -5412,6 +5414,49 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
5412
5414
  margin-bottom: -0.25rem;
5413
5415
  flex-shrink: 0;
5414
5416
  }
5417
+ .pa-card__header--underlined h1, .pa-card__header--underlined h2, .pa-card__header--underlined h3, .pa-card__header--underlined h4, .pa-card__header--underlined h5, .pa-card__header--underlined h6 {
5418
+ border-bottom: 2px solid var(--pa-accent);
5419
+ padding-bottom: 0.8rem;
5420
+ }
5421
+ .pa-card__header--underlined.pa-card__header--underline-success h1, .pa-card__header--underlined.pa-card__header--underline-success h2, .pa-card__header--underlined.pa-card__header--underline-success h3, .pa-card__header--underlined.pa-card__header--underline-success h4, .pa-card__header--underlined.pa-card__header--underline-success h5, .pa-card__header--underlined.pa-card__header--underline-success h6 {
5422
+ border-bottom-color: var(--pa-success-bg);
5423
+ }
5424
+ .pa-card__header--underlined.pa-card__header--underline-warning h1, .pa-card__header--underlined.pa-card__header--underline-warning h2, .pa-card__header--underlined.pa-card__header--underline-warning h3, .pa-card__header--underlined.pa-card__header--underline-warning h4, .pa-card__header--underlined.pa-card__header--underline-warning h5, .pa-card__header--underlined.pa-card__header--underline-warning h6 {
5425
+ border-bottom-color: var(--pa-warning-bg);
5426
+ }
5427
+ .pa-card__header--underlined.pa-card__header--underline-danger h1, .pa-card__header--underlined.pa-card__header--underline-danger h2, .pa-card__header--underlined.pa-card__header--underline-danger h3, .pa-card__header--underlined.pa-card__header--underline-danger h4, .pa-card__header--underlined.pa-card__header--underline-danger h5, .pa-card__header--underlined.pa-card__header--underline-danger h6 {
5428
+ border-bottom-color: var(--pa-danger-bg);
5429
+ }
5430
+ .pa-card__header--underlined.pa-card__header--underline-info h1, .pa-card__header--underlined.pa-card__header--underline-info h2, .pa-card__header--underlined.pa-card__header--underline-info h3, .pa-card__header--underlined.pa-card__header--underline-info h4, .pa-card__header--underlined.pa-card__header--underline-info h5, .pa-card__header--underlined.pa-card__header--underline-info h6 {
5431
+ border-bottom-color: var(--pa-info-bg);
5432
+ }
5433
+ .pa-card__header--underlined.pa-card__header--underline-color-1 h1, .pa-card__header--underlined.pa-card__header--underline-color-1 h2, .pa-card__header--underlined.pa-card__header--underline-color-1 h3, .pa-card__header--underlined.pa-card__header--underline-color-1 h4, .pa-card__header--underlined.pa-card__header--underline-color-1 h5, .pa-card__header--underlined.pa-card__header--underline-color-1 h6 {
5434
+ border-bottom-color: var(--pa-color-1);
5435
+ }
5436
+ .pa-card__header--underlined.pa-card__header--underline-color-2 h1, .pa-card__header--underlined.pa-card__header--underline-color-2 h2, .pa-card__header--underlined.pa-card__header--underline-color-2 h3, .pa-card__header--underlined.pa-card__header--underline-color-2 h4, .pa-card__header--underlined.pa-card__header--underline-color-2 h5, .pa-card__header--underlined.pa-card__header--underline-color-2 h6 {
5437
+ border-bottom-color: var(--pa-color-2);
5438
+ }
5439
+ .pa-card__header--underlined.pa-card__header--underline-color-3 h1, .pa-card__header--underlined.pa-card__header--underline-color-3 h2, .pa-card__header--underlined.pa-card__header--underline-color-3 h3, .pa-card__header--underlined.pa-card__header--underline-color-3 h4, .pa-card__header--underlined.pa-card__header--underline-color-3 h5, .pa-card__header--underlined.pa-card__header--underline-color-3 h6 {
5440
+ border-bottom-color: var(--pa-color-3);
5441
+ }
5442
+ .pa-card__header--underlined.pa-card__header--underline-color-4 h1, .pa-card__header--underlined.pa-card__header--underline-color-4 h2, .pa-card__header--underlined.pa-card__header--underline-color-4 h3, .pa-card__header--underlined.pa-card__header--underline-color-4 h4, .pa-card__header--underlined.pa-card__header--underline-color-4 h5, .pa-card__header--underlined.pa-card__header--underline-color-4 h6 {
5443
+ border-bottom-color: var(--pa-color-4);
5444
+ }
5445
+ .pa-card__header--underlined.pa-card__header--underline-color-5 h1, .pa-card__header--underlined.pa-card__header--underline-color-5 h2, .pa-card__header--underlined.pa-card__header--underline-color-5 h3, .pa-card__header--underlined.pa-card__header--underline-color-5 h4, .pa-card__header--underlined.pa-card__header--underline-color-5 h5, .pa-card__header--underlined.pa-card__header--underline-color-5 h6 {
5446
+ border-bottom-color: var(--pa-color-5);
5447
+ }
5448
+ .pa-card__header--underlined.pa-card__header--underline-color-6 h1, .pa-card__header--underlined.pa-card__header--underline-color-6 h2, .pa-card__header--underlined.pa-card__header--underline-color-6 h3, .pa-card__header--underlined.pa-card__header--underline-color-6 h4, .pa-card__header--underlined.pa-card__header--underline-color-6 h5, .pa-card__header--underlined.pa-card__header--underline-color-6 h6 {
5449
+ border-bottom-color: var(--pa-color-6);
5450
+ }
5451
+ .pa-card__header--underlined.pa-card__header--underline-color-7 h1, .pa-card__header--underlined.pa-card__header--underline-color-7 h2, .pa-card__header--underlined.pa-card__header--underline-color-7 h3, .pa-card__header--underlined.pa-card__header--underline-color-7 h4, .pa-card__header--underlined.pa-card__header--underline-color-7 h5, .pa-card__header--underlined.pa-card__header--underline-color-7 h6 {
5452
+ border-bottom-color: var(--pa-color-7);
5453
+ }
5454
+ .pa-card__header--underlined.pa-card__header--underline-color-8 h1, .pa-card__header--underlined.pa-card__header--underline-color-8 h2, .pa-card__header--underlined.pa-card__header--underline-color-8 h3, .pa-card__header--underlined.pa-card__header--underline-color-8 h4, .pa-card__header--underlined.pa-card__header--underline-color-8 h5, .pa-card__header--underlined.pa-card__header--underline-color-8 h6 {
5455
+ border-bottom-color: var(--pa-color-8);
5456
+ }
5457
+ .pa-card__header--underlined.pa-card__header--underline-color-9 h1, .pa-card__header--underlined.pa-card__header--underline-color-9 h2, .pa-card__header--underlined.pa-card__header--underline-color-9 h3, .pa-card__header--underlined.pa-card__header--underline-color-9 h4, .pa-card__header--underlined.pa-card__header--underline-color-9 h5, .pa-card__header--underlined.pa-card__header--underline-color-9 h6 {
5458
+ border-bottom-color: var(--pa-color-9);
5459
+ }
5415
5460
  .pa-card__header--wrap {
5416
5461
  flex-wrap: wrap;
5417
5462
  }
@@ -5774,7 +5819,7 @@ a.pa-card p {
5774
5819
  .pa-section {
5775
5820
  margin-bottom: 3.2rem;
5776
5821
  }
5777
- .pa-section h3 {
5822
+ .pa-section > h3 {
5778
5823
  color: var(--pa-text-color-1);
5779
5824
  margin-bottom: 1.6rem;
5780
5825
  border-bottom: 2px solid var(--pa-accent);
@@ -7301,6 +7346,8 @@ a.pa-card p {
7301
7346
  .pa-btn--loading {
7302
7347
  position: relative;
7303
7348
  pointer-events: none;
7349
+ -webkit-text-fill-color: transparent;
7350
+ transition: none;
7304
7351
  }
7305
7352
  .pa-btn--loading .pa-btn__spinner {
7306
7353
  position: absolute;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@keenmate/pure-admin-core",
3
- "version": "2.0.0",
3
+ "version": "2.0.1",
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": {
package/src/scss/core-components/_buttons.scss CHANGED
@@ -214,6 +214,8 @@
214
214
  &--loading {
215
215
  position: relative;
216
216
  pointer-events: none;
217
+ -webkit-text-fill-color: transparent; // Hide text but preserve layout and currentColor for spinner
218
+ transition: none;
217
219
 
218
220
  .pa-btn__spinner {
219
221
  position: absolute;
package/src/scss/core-components/_cards.scss CHANGED
@@ -32,7 +32,8 @@
32
32
  gap: $spacing-base; // Gap between header elements (title, description, actions)
33
33
  min-width: 0; // Enable text truncation
34
34
 
35
- // Reset margins/paddings for all native elements
35
+ // Reset margins/paddings/borders for all native elements
36
+ // (border-bottom reset prevents .pa-section h3 rule from bleeding in)
36
37
  h1,
37
38
  h2,
38
39
  h3,
@@ -49,6 +50,7 @@
49
50
  fieldset {
50
51
  margin: 0;
51
52
  padding: 0;
53
+ border-bottom: none;
52
54
  }
53
55
 
54
56
  // Specific heading styles
@@ -96,6 +98,63 @@
96
98
  flex-shrink: 0;
97
99
  }
98
100
 
101
+ // Underline modifier - accent border under heading inside card header
102
+ &--underlined {
103
+ h1, h2, h3, h4, h5, h6 {
104
+ border-bottom: $border-width-medium solid var(--pa-accent);
105
+ padding-bottom: $spacing-sm;
106
+ }
107
+
108
+ // Semantic color variants
109
+ &.pa-card__header--underline-success h1,
110
+ &.pa-card__header--underline-success h2,
111
+ &.pa-card__header--underline-success h3,
112
+ &.pa-card__header--underline-success h4,
113
+ &.pa-card__header--underline-success h5,
114
+ &.pa-card__header--underline-success h6 {
115
+ border-bottom-color: var(--pa-success-bg);
116
+ }
117
+
118
+ &.pa-card__header--underline-warning h1,
119
+ &.pa-card__header--underline-warning h2,
120
+ &.pa-card__header--underline-warning h3,
121
+ &.pa-card__header--underline-warning h4,
122
+ &.pa-card__header--underline-warning h5,
123
+ &.pa-card__header--underline-warning h6 {
124
+ border-bottom-color: var(--pa-warning-bg);
125
+ }
126
+
127
+ &.pa-card__header--underline-danger h1,
128
+ &.pa-card__header--underline-danger h2,
129
+ &.pa-card__header--underline-danger h3,
130
+ &.pa-card__header--underline-danger h4,
131
+ &.pa-card__header--underline-danger h5,
132
+ &.pa-card__header--underline-danger h6 {
133
+ border-bottom-color: var(--pa-danger-bg);
134
+ }
135
+
136
+ &.pa-card__header--underline-info h1,
137
+ &.pa-card__header--underline-info h2,
138
+ &.pa-card__header--underline-info h3,
139
+ &.pa-card__header--underline-info h4,
140
+ &.pa-card__header--underline-info h5,
141
+ &.pa-card__header--underline-info h6 {
142
+ border-bottom-color: var(--pa-info-bg);
143
+ }
144
+
145
+ // Theme color slots (1-9)
146
+ @for $i from 1 through 9 {
147
+ &.pa-card__header--underline-color-#{$i} h1,
148
+ &.pa-card__header--underline-color-#{$i} h2,
149
+ &.pa-card__header--underline-color-#{$i} h3,
150
+ &.pa-card__header--underline-color-#{$i} h4,
151
+ &.pa-card__header--underline-color-#{$i} h5,
152
+ &.pa-card__header--underline-color-#{$i} h6 {
153
+ border-bottom-color: var(--pa-color-#{$i});
154
+ }
155
+ }
156
+ }
157
+
99
158
  // Wrap modifier - allow description to wrap (for mobile or long descriptions)
100
159
  &--wrap {
101
160
  flex-wrap: wrap;
@@ -407,7 +466,7 @@ a.pa-card {
407
466
  .pa-section {
408
467
  margin-bottom: $section-margin-v;
409
468
 
410
- h3 {
469
+ > h3 {
411
470
  color: var(--pa-text-color-1);
412
471
  margin-bottom: $spacing-base;
413
472
  border-bottom: $border-width-medium solid var(--pa-accent);
package/src/scss/core-components/_grid.scss CHANGED
@@ -48,6 +48,7 @@ $grid-columns-fractions: (
48
48
  display: flex;
49
49
  flex-wrap: wrap;
50
50
  margin-inline: -$grid-gutter; // RTL: flips automatically
51
+ row-gap: $grid-gutter; // Vertical gap when columns wrap (half the horizontal gutter total)
51
52
 
52
53
  // Nested rows reset margins
53
54
  .pa-row {