@pitcher/css 2025.10.1-7.1760708463235 → 2025.10.1-7.1760710453627
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/index.html +100 -9
- package/package.json +1 -1
- package/pitcher-ui.css +83 -0
package/index.html
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<title>Pitcher UI Extended Demo</title>
|
|
7
7
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
8
8
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
9
|
-
<link rel="stylesheet" href="
|
|
9
|
+
<link rel="stylesheet" href="pitcher-ui.css">
|
|
10
10
|
<script src="https://cdn.jsdelivr.net/npm/@pitcher/js-api"></script>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -94,6 +94,105 @@
|
|
|
94
94
|
</div>
|
|
95
95
|
</div>
|
|
96
96
|
|
|
97
|
+
<!-- Icon Buttons -->
|
|
98
|
+
<div class="p-card p-mb-4">
|
|
99
|
+
<div class="p-card-header">Icon Buttons</div>
|
|
100
|
+
<div class="p-card-body">
|
|
101
|
+
<div class="p-mb-4">
|
|
102
|
+
<strong class="p-mb-2" style="display: block;">Default Icon Buttons:</strong>
|
|
103
|
+
<div class="p-flex p-items-center p-gap-3 p-flex-wrap">
|
|
104
|
+
<button class="p-btn-icon" aria-label="Search">
|
|
105
|
+
<i class="fas fa-search"></i>
|
|
106
|
+
</button>
|
|
107
|
+
<button class="p-btn-icon" aria-label="Edit">
|
|
108
|
+
<i class="fas fa-edit"></i>
|
|
109
|
+
</button>
|
|
110
|
+
<button class="p-btn-icon" aria-label="Settings">
|
|
111
|
+
<i class="fas fa-cog"></i>
|
|
112
|
+
</button>
|
|
113
|
+
<button class="p-btn-icon" aria-label="Notifications">
|
|
114
|
+
<i class="fas fa-bell"></i>
|
|
115
|
+
</button>
|
|
116
|
+
<button class="p-btn-icon" disabled aria-label="Disabled">
|
|
117
|
+
<i class="fas fa-trash"></i>
|
|
118
|
+
</button>
|
|
119
|
+
</div>
|
|
120
|
+
</div>
|
|
121
|
+
|
|
122
|
+
<div class="p-mb-4">
|
|
123
|
+
<strong class="p-mb-2" style="display: block;">Icon Button Sizes:</strong>
|
|
124
|
+
<div class="p-flex p-items-center p-gap-3 p-flex-wrap">
|
|
125
|
+
<button class="p-btn-icon p-btn-icon-sm" aria-label="Small">
|
|
126
|
+
<i class="fas fa-heart"></i>
|
|
127
|
+
</button>
|
|
128
|
+
<button class="p-btn-icon" aria-label="Default">
|
|
129
|
+
<i class="fas fa-heart"></i>
|
|
130
|
+
</button>
|
|
131
|
+
<button class="p-btn-icon p-btn-icon-lg" aria-label="Large">
|
|
132
|
+
<i class="fas fa-heart"></i>
|
|
133
|
+
</button>
|
|
134
|
+
</div>
|
|
135
|
+
</div>
|
|
136
|
+
|
|
137
|
+
<div class="p-mb-4">
|
|
138
|
+
<strong class="p-mb-2" style="display: block;">Primary Icon Buttons:</strong>
|
|
139
|
+
<div class="p-flex p-items-center p-gap-3 p-flex-wrap">
|
|
140
|
+
<button class="p-btn-icon p-btn-icon-primary" aria-label="Add">
|
|
141
|
+
<i class="fas fa-plus"></i>
|
|
142
|
+
</button>
|
|
143
|
+
<button class="p-btn-icon p-btn-icon-primary" aria-label="Check">
|
|
144
|
+
<i class="fas fa-check"></i>
|
|
145
|
+
</button>
|
|
146
|
+
<button class="p-btn-icon p-btn-icon-primary" aria-label="Download">
|
|
147
|
+
<i class="fas fa-download"></i>
|
|
148
|
+
</button>
|
|
149
|
+
</div>
|
|
150
|
+
</div>
|
|
151
|
+
|
|
152
|
+
<div class="p-mb-4">
|
|
153
|
+
<strong class="p-mb-2" style="display: block;">Success Icon Buttons:</strong>
|
|
154
|
+
<div class="p-flex p-items-center p-gap-3 p-flex-wrap">
|
|
155
|
+
<button class="p-btn-icon p-btn-icon-success" aria-label="Approve">
|
|
156
|
+
<i class="fas fa-check-circle"></i>
|
|
157
|
+
</button>
|
|
158
|
+
<button class="p-btn-icon p-btn-icon-success" aria-label="Thumbs Up">
|
|
159
|
+
<i class="fas fa-thumbs-up"></i>
|
|
160
|
+
</button>
|
|
161
|
+
</div>
|
|
162
|
+
</div>
|
|
163
|
+
|
|
164
|
+
<div class="p-mb-4">
|
|
165
|
+
<strong class="p-mb-2" style="display: block;">Danger Icon Buttons:</strong>
|
|
166
|
+
<div class="p-flex p-items-center p-gap-3 p-flex-wrap">
|
|
167
|
+
<button class="p-btn-icon p-btn-icon-danger" aria-label="Delete">
|
|
168
|
+
<i class="fas fa-trash"></i>
|
|
169
|
+
</button>
|
|
170
|
+
<button class="p-btn-icon p-btn-icon-danger" aria-label="Close">
|
|
171
|
+
<i class="fas fa-times"></i>
|
|
172
|
+
</button>
|
|
173
|
+
<button class="p-btn-icon p-btn-icon-danger" aria-label="Remove">
|
|
174
|
+
<i class="fas fa-minus-circle"></i>
|
|
175
|
+
</button>
|
|
176
|
+
</div>
|
|
177
|
+
</div>
|
|
178
|
+
|
|
179
|
+
<div>
|
|
180
|
+
<strong class="p-mb-2" style="display: block;">Outlined Icon Buttons:</strong>
|
|
181
|
+
<div class="p-flex p-items-center p-gap-3 p-flex-wrap">
|
|
182
|
+
<button class="p-btn-icon p-btn-icon-outlined" aria-label="Filter">
|
|
183
|
+
<i class="fas fa-filter"></i>
|
|
184
|
+
</button>
|
|
185
|
+
<button class="p-btn-icon p-btn-icon-outlined" aria-label="Sort">
|
|
186
|
+
<i class="fas fa-sort"></i>
|
|
187
|
+
</button>
|
|
188
|
+
<button class="p-btn-icon p-btn-icon-outlined" aria-label="Share">
|
|
189
|
+
<i class="fas fa-share"></i>
|
|
190
|
+
</button>
|
|
191
|
+
</div>
|
|
192
|
+
</div>
|
|
193
|
+
</div>
|
|
194
|
+
</div>
|
|
195
|
+
|
|
97
196
|
<!-- Badges & Tags -->
|
|
98
197
|
<div class="p-card p-mb-4">
|
|
99
198
|
<div class="p-card-header">Badges & Tags</div>
|
|
@@ -825,14 +924,6 @@
|
|
|
825
924
|
initializeTabs();
|
|
826
925
|
console.log('Pitcher UI Framework initialized');
|
|
827
926
|
}
|
|
828
|
-
|
|
829
|
-
// Embedded App Initialize function (if used in Pitcher)
|
|
830
|
-
window.initialize = async function (data, done) {
|
|
831
|
-
await applyInstanceColor();
|
|
832
|
-
initializeTabs();
|
|
833
|
-
|
|
834
|
-
if (done) done();
|
|
835
|
-
};
|
|
836
927
|
</script>
|
|
837
928
|
</body>
|
|
838
929
|
</html>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pitcher/css",
|
|
3
|
-
"version": "2025.10.17.
|
|
3
|
+
"version": "2025.10.17.1760710453627",
|
|
4
4
|
"description": "Pitcher UI Framework - A comprehensive CSS framework with components for building modern web applications",
|
|
5
5
|
"main": "pitcher-ui.css",
|
|
6
6
|
"style": "pitcher-ui.css",
|
package/pitcher-ui.css
CHANGED
|
@@ -248,6 +248,89 @@ p {
|
|
|
248
248
|
display: flex;
|
|
249
249
|
}
|
|
250
250
|
|
|
251
|
+
/* Icon Buttons */
|
|
252
|
+
.p-btn-icon,
|
|
253
|
+
button.p-btn-icon {
|
|
254
|
+
width: 40px !important;
|
|
255
|
+
height: 40px !important;
|
|
256
|
+
min-width: 40px;
|
|
257
|
+
padding: 0 !important;
|
|
258
|
+
border-radius: 50% !important;
|
|
259
|
+
display: inline-flex !important;
|
|
260
|
+
align-items: center;
|
|
261
|
+
justify-content: center;
|
|
262
|
+
border: none !important;
|
|
263
|
+
background: var(--p-primary6);
|
|
264
|
+
color: var(--p-text2);
|
|
265
|
+
cursor: pointer;
|
|
266
|
+
transition: all 0.2s;
|
|
267
|
+
text-transform: none !important;
|
|
268
|
+
letter-spacing: normal !important;
|
|
269
|
+
flex-shrink: 0;
|
|
270
|
+
outline: none;
|
|
271
|
+
box-shadow: none;
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
.p-btn-icon:hover:not(:disabled) {
|
|
275
|
+
background: var(--p-primary5);
|
|
276
|
+
color: var(--p-primary);
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
.p-btn-icon.p-btn-icon-sm {
|
|
280
|
+
width: 32px !important;
|
|
281
|
+
height: 32px !important;
|
|
282
|
+
min-width: 32px;
|
|
283
|
+
font-size: var(--font-size-sm);
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
.p-btn-icon.p-btn-icon-lg {
|
|
287
|
+
width: 48px !important;
|
|
288
|
+
height: 48px !important;
|
|
289
|
+
min-width: 48px;
|
|
290
|
+
font-size: var(--font-size-lg);
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
.p-btn-icon.p-btn-icon-primary {
|
|
294
|
+
background: var(--p-primary);
|
|
295
|
+
color: var(--p-base);
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
.p-btn-icon.p-btn-icon-primary:hover:not(:disabled) {
|
|
299
|
+
background: var(--p-primary2);
|
|
300
|
+
color: var(--p-base);
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
.p-btn-icon.p-btn-icon-danger {
|
|
304
|
+
background: var(--p-error2);
|
|
305
|
+
color: var(--p-error);
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
.p-btn-icon.p-btn-icon-danger:hover:not(:disabled) {
|
|
309
|
+
background: #fce8ec;
|
|
310
|
+
color: var(--p-error3);
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
.p-btn-icon.p-btn-icon-success {
|
|
314
|
+
background: var(--p-success2);
|
|
315
|
+
color: var(--p-success);
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
.p-btn-icon.p-btn-icon-success:hover:not(:disabled) {
|
|
319
|
+
background: #f4fce3;
|
|
320
|
+
color: var(--p-success3);
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
.p-btn-icon.p-btn-icon-outlined {
|
|
324
|
+
background: transparent;
|
|
325
|
+
border: 1px solid var(--rsk-color-gray-200) !important;
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
.p-btn-icon.p-btn-icon-outlined:hover:not(:disabled) {
|
|
329
|
+
border-color: var(--p-primary) !important;
|
|
330
|
+
background: var(--p-primary6);
|
|
331
|
+
color: var(--p-primary);
|
|
332
|
+
}
|
|
333
|
+
|
|
251
334
|
/* Inputs & Form Elements */
|
|
252
335
|
.p-form-group {
|
|
253
336
|
margin-bottom: var(--spacing-4);
|