@keenmate/pure-admin-core 2.2.0 → 2.3.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 (7) hide show
  1. package/README.md +13 -8
  2. package/dist/css/main.css +38 -8
  3. package/package.json +1 -1
  4. package/src/scss/core-components/_buttons.scss +565 -548
  5. package/src/scss/core-components/_toasts.scss +16 -1
  6. package/src/scss/core-components/forms/_form-inputs.scss +136 -135
  7. package/src/scss/variables/_components.scss +1 -1
package/src/scss/core-components/_toasts.scss CHANGED
@@ -179,6 +179,16 @@
179
179
  line-height: $line-height-base;
180
180
  }
181
181
 
182
+ // Toast actions (buttons under a separator)
183
+ .pa-toast__actions {
184
+ margin-top: $spacing-base;
185
+ padding-top: $spacing-base;
186
+ border-top: $border-width-base solid var(--pa-border-color);
187
+ display: flex;
188
+ gap: $spacing-sm;
189
+ flex-wrap: wrap;
190
+ }
191
+
182
192
  // Toast close button
183
193
  .pa-toast__close {
184
194
  flex-shrink: 0;
@@ -215,7 +225,7 @@
215
225
  inset-inline-start: 0; // RTL: flips to right
216
226
  height: $toast-progress-height;
217
227
  background-color: currentColor;
218
- opacity: 0.3;
228
+ opacity: 0.6;
219
229
  transition: width linear;
220
230
  }
221
231
 
@@ -309,6 +319,11 @@
309
319
 
310
320
  // ===== FILLED TOAST VARIANTS =====
311
321
 
322
+ // Filled toast actions: separator color + reset button colors from toast inheritance
323
+ [class*="pa-toast--filled"] .pa-toast__actions {
324
+ border-top-color: rgba(255, 255, 255, 0.25);
325
+ }
326
+
312
327
  .pa-toast--filled-primary {
313
328
  background-color: var(--pa-btn-primary-bg);
314
329
  border-color: var(--pa-btn-primary-bg);
package/src/scss/core-components/forms/_form-inputs.scss CHANGED
@@ -1,135 +1,136 @@
1
- /* ========================================
2
- Form Input Elements
3
- Input, select, textarea base styles and sizes
4
- ======================================== */
5
- @use '../../variables' as *;
6
-
7
- .pa-input {
8
- width: 100%;
9
- height: #{$base-input-size-md-height}rem;
10
- padding: $input-padding-v $input-padding-h;
11
- border: $border-width-base solid var(--pa-border-color);
12
- border-radius: $border-radius;
13
- font-size: $font-size-sm;
14
- background-color: var(--pa-input-bg);
15
- color: var(--pa-text-color-1);
16
- transition: border-color $transition-fast $easing-snappy;
17
-
18
- &:focus {
19
- outline: none;
20
- border-color: var(--pa-input-focus-border-color);
21
- box-shadow: 0 0 0 $focus-ring-width var(--pa-accent-light);
22
- }
23
- }
24
-
25
- .pa-select {
26
- width: 100%;
27
- height: #{$base-input-size-md-height}rem;
28
- padding: $select-padding-v $select-padding-h;
29
- border: $border-width-base solid var(--pa-border-color);
30
- border-radius: $border-radius;
31
- font-size: $font-size-sm;
32
- background-color: var(--pa-input-bg);
33
- color: var(--pa-text-color-1);
34
- transition: border-color $transition-fast $easing-snappy;
35
-
36
- &:focus {
37
- outline: none;
38
- border-color: var(--pa-select-focus-border-color);
39
- box-shadow: 0 0 0 $focus-ring-width var(--pa-accent-light);
40
- }
41
- }
42
-
43
- .pa-textarea {
44
- width: 100%;
45
- padding: $input-padding-v $input-padding-h;
46
- border: $border-width-base solid var(--pa-border-color);
47
- border-radius: $border-radius;
48
- font-size: $font-size-sm;
49
- background-color: var(--pa-input-bg);
50
- color: var(--pa-text-color-1);
51
- transition: border-color $transition-fast $easing-snappy;
52
- resize: vertical;
53
- min-height: $textarea-min-height;
54
-
55
- &:focus {
56
- outline: none;
57
- border-color: var(--pa-textarea-focus-border-color);
58
- box-shadow: 0 0 0 $focus-ring-width var(--pa-accent-light);
59
- }
60
-
61
- &::placeholder {
62
- color: var(--pa-text-color-2);
63
- }
64
- }
65
-
66
- // Input Sizes - heights aligned with $base-input-size-* variables
67
- .pa-input--xs,
68
- .pa-select--xs {
69
- height: #{$base-input-size-xs-height}rem;
70
- padding: $input-padding-xs-v $input-padding-h;
71
- font-size: $font-size-xs;
72
- }
73
-
74
- .pa-input--sm,
75
- .pa-select--sm {
76
- height: #{$base-input-size-sm-height}rem;
77
- padding: $input-padding-v $input-padding-h;
78
- font-size: $font-size-sm;
79
- }
80
-
81
- .pa-input--lg,
82
- .pa-select--lg {
83
- height: #{$base-input-size-lg-height}rem;
84
- padding: $input-padding-v $input-padding-h;
85
- font-size: $font-size-base;
86
- }
87
-
88
- .pa-input--xl,
89
- .pa-select--xl {
90
- height: #{$base-input-size-xl-height}rem;
91
- padding: $input-padding-v $input-padding-h;
92
- font-size: $font-size-lg;
93
- }
94
-
95
- // Textarea Sizes - height sets initial size, min-height prevents shrinking below that
96
- .pa-textarea--xs {
97
- height: 4rem;
98
- min-height: 4rem;
99
- padding: $input-padding-xs-v $input-padding-h;
100
- font-size: $font-size-xs;
101
- }
102
-
103
- .pa-textarea--sm {
104
- height: 6rem;
105
- min-height: 6rem;
106
- padding: $input-padding-v $input-padding-h;
107
- font-size: $font-size-sm;
108
- }
109
-
110
- .pa-textarea--lg {
111
- height: 12rem;
112
- min-height: 12rem;
113
- padding: $input-padding-v $input-padding-h;
114
- font-size: $font-size-base;
115
- }
116
-
117
- .pa-textarea--xl {
118
- height: 16rem;
119
- min-height: 16rem;
120
- padding: $input-padding-v $input-padding-h;
121
- font-size: $font-size-lg;
122
- }
123
-
124
- // Dark mode: invert native date/time picker icons for visibility
125
- .pa-mode-dark {
126
- input[type="date"],
127
- input[type="time"],
128
- input[type="datetime-local"],
129
- input[type="month"],
130
- input[type="week"] {
131
- &::-webkit-calendar-picker-indicator {
132
- filter: invert(1);
133
- }
134
- }
135
- }
1
+ /* ========================================
2
+ Form Input Elements
3
+ Input, select, textarea base styles and sizes
4
+ ======================================== */
5
+ @use '../../variables' as *;
6
+
7
+ .pa-input {
8
+ width: 100%;
9
+ height: #{$base-input-size-md-height}rem;
10
+ padding: $input-padding-v $input-padding-h;
11
+ border: $border-width-base solid var(--pa-border-color);
12
+ border-radius: $border-radius;
13
+ font-size: $font-size-sm;
14
+ background-color: var(--pa-input-bg);
15
+ color: var(--pa-text-color-1);
16
+ transition: border-color $transition-fast $easing-snappy;
17
+
18
+ &:focus {
19
+ outline: none;
20
+ border-color: var(--pa-input-focus-border-color);
21
+ box-shadow: 0 0 0 $focus-ring-width var(--pa-accent-light);
22
+ }
23
+ }
24
+
25
+ .pa-select {
26
+ width: 100%;
27
+ height: #{$base-input-size-md-height}rem;
28
+ padding: $select-padding-v $select-padding-h;
29
+ border: $border-width-base solid var(--pa-border-color);
30
+ border-radius: $border-radius;
31
+ font-size: $font-size-sm;
32
+ line-height: normal;
33
+ background-color: var(--pa-input-bg);
34
+ color: var(--pa-text-color-1);
35
+ transition: border-color $transition-fast $easing-snappy;
36
+
37
+ &:focus {
38
+ outline: none;
39
+ border-color: var(--pa-select-focus-border-color);
40
+ box-shadow: 0 0 0 $focus-ring-width var(--pa-accent-light);
41
+ }
42
+ }
43
+
44
+ .pa-textarea {
45
+ width: 100%;
46
+ padding: $input-padding-v $input-padding-h;
47
+ border: $border-width-base solid var(--pa-border-color);
48
+ border-radius: $border-radius;
49
+ font-size: $font-size-sm;
50
+ background-color: var(--pa-input-bg);
51
+ color: var(--pa-text-color-1);
52
+ transition: border-color $transition-fast $easing-snappy;
53
+ resize: vertical;
54
+ min-height: $textarea-min-height;
55
+
56
+ &:focus {
57
+ outline: none;
58
+ border-color: var(--pa-textarea-focus-border-color);
59
+ box-shadow: 0 0 0 $focus-ring-width var(--pa-accent-light);
60
+ }
61
+
62
+ &::placeholder {
63
+ color: var(--pa-text-color-2);
64
+ }
65
+ }
66
+
67
+ // Input Sizes - heights aligned with $base-input-size-* variables
68
+ .pa-input--xs,
69
+ .pa-select--xs {
70
+ height: #{$base-input-size-xs-height}rem;
71
+ padding: $input-padding-xs-v $input-padding-h;
72
+ font-size: $font-size-xs;
73
+ }
74
+
75
+ .pa-input--sm,
76
+ .pa-select--sm {
77
+ height: #{$base-input-size-sm-height}rem;
78
+ padding: $input-padding-v $input-padding-h;
79
+ font-size: $font-size-sm;
80
+ }
81
+
82
+ .pa-input--lg,
83
+ .pa-select--lg {
84
+ height: #{$base-input-size-lg-height}rem;
85
+ padding: $input-padding-v $input-padding-h;
86
+ font-size: $font-size-base;
87
+ }
88
+
89
+ .pa-input--xl,
90
+ .pa-select--xl {
91
+ height: #{$base-input-size-xl-height}rem;
92
+ padding: $input-padding-v $input-padding-h;
93
+ font-size: $font-size-lg;
94
+ }
95
+
96
+ // Textarea Sizes - height sets initial size, min-height prevents shrinking below that
97
+ .pa-textarea--xs {
98
+ height: 4rem;
99
+ min-height: 4rem;
100
+ padding: $input-padding-xs-v $input-padding-h;
101
+ font-size: $font-size-xs;
102
+ }
103
+
104
+ .pa-textarea--sm {
105
+ height: 6rem;
106
+ min-height: 6rem;
107
+ padding: $input-padding-v $input-padding-h;
108
+ font-size: $font-size-sm;
109
+ }
110
+
111
+ .pa-textarea--lg {
112
+ height: 12rem;
113
+ min-height: 12rem;
114
+ padding: $input-padding-v $input-padding-h;
115
+ font-size: $font-size-base;
116
+ }
117
+
118
+ .pa-textarea--xl {
119
+ height: 16rem;
120
+ min-height: 16rem;
121
+ padding: $input-padding-v $input-padding-h;
122
+ font-size: $font-size-lg;
123
+ }
124
+
125
+ // Dark mode: invert native date/time picker icons for visibility
126
+ .pa-mode-dark {
127
+ input[type="date"],
128
+ input[type="time"],
129
+ input[type="datetime-local"],
130
+ input[type="month"],
131
+ input[type="week"] {
132
+ &::-webkit-calendar-picker-indicator {
133
+ filter: invert(1);
134
+ }
135
+ }
136
+ }
package/src/scss/variables/_components.scss CHANGED
@@ -397,7 +397,7 @@ $toast-padding-v: $spacing-md !default;
397
397
  $toast-padding-h: $spacing-md !default;
398
398
  $toast-icon-size: 3.2rem !default; // 32px (was 2rem)
399
399
  $toast-close-size: 2.4rem !default; // 24px (was 1.5rem)
400
- $toast-progress-height: 3px !default;
400
+ $toast-progress-height: 5px !default;
401
401
 
402
402
  // ============================================================================
403
403
  // TOOLTIP SYSTEM