@keenmate/pure-admin-core 1.1.3 → 1.3.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 +36 -0
- package/dist/css/main.css +1138 -29
- package/package.json +1 -1
- package/snippets/detail-panel.html +138 -0
- package/src/scss/_base-css-variables.scss +7 -0
- package/src/scss/_core.scss +6 -0
- package/src/scss/core-components/_data-display.scss +347 -0
- package/src/scss/core-components/_detail-panel.scss +335 -0
- package/src/scss/core-components/_grid.scss +4 -0
- package/src/scss/core-components/_tables.scss +277 -0
- package/src/scss/variables/_components.scss +47 -0
package/package.json
CHANGED
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
<!-- =============================================
|
|
2
|
+
Detail Panel - Inline Split-View Mode
|
|
3
|
+
============================================= -->
|
|
4
|
+
|
|
5
|
+
<!-- Inline split-view: table + side panel -->
|
|
6
|
+
<div class="pa-detail-view">
|
|
7
|
+
<!-- Left side: table -->
|
|
8
|
+
<div class="pa-detail-view__main">
|
|
9
|
+
<table class="pa-table pa-table--hover pa-table--striped">
|
|
10
|
+
<thead>
|
|
11
|
+
<tr>
|
|
12
|
+
<th>Name</th>
|
|
13
|
+
<th>Email</th>
|
|
14
|
+
<th>Role</th>
|
|
15
|
+
</tr>
|
|
16
|
+
</thead>
|
|
17
|
+
<tbody>
|
|
18
|
+
<tr class="is-selected" onclick="openInlinePanel(1)">
|
|
19
|
+
<td>John Doe</td>
|
|
20
|
+
<td>john@example.com</td>
|
|
21
|
+
<td>Admin</td>
|
|
22
|
+
</tr>
|
|
23
|
+
<tr onclick="openInlinePanel(2)">
|
|
24
|
+
<td>Jane Smith</td>
|
|
25
|
+
<td>jane@example.com</td>
|
|
26
|
+
<td>Editor</td>
|
|
27
|
+
</tr>
|
|
28
|
+
</tbody>
|
|
29
|
+
</table>
|
|
30
|
+
</div>
|
|
31
|
+
|
|
32
|
+
<!-- Right side: detail panel -->
|
|
33
|
+
<div class="pa-detail-view__panel pa-detail-view__panel--open">
|
|
34
|
+
<div class="pa-detail-panel__content">
|
|
35
|
+
<div class="pa-detail-panel-resize"></div>
|
|
36
|
+
<div class="pa-detail-panel__header">
|
|
37
|
+
<h4 class="pa-detail-panel__title">User Details</h4>
|
|
38
|
+
<button class="pa-detail-panel__close" onclick="closeInlinePanel()">
|
|
39
|
+
<i class="fas fa-times"></i>
|
|
40
|
+
</button>
|
|
41
|
+
</div>
|
|
42
|
+
<div class="pa-detail-panel__body">
|
|
43
|
+
<p>Detail content goes here...</p>
|
|
44
|
+
</div>
|
|
45
|
+
<div class="pa-detail-panel__footer">
|
|
46
|
+
<button class="pa-btn pa-btn--primary pa-btn--sm">Edit</button>
|
|
47
|
+
<button class="pa-btn pa-btn--secondary pa-btn--sm">Delete</button>
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
51
|
+
</div>
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
<!-- =============================================
|
|
55
|
+
Detail Panel - Card Overlay Mode
|
|
56
|
+
============================================= -->
|
|
57
|
+
|
|
58
|
+
<!-- Card overlay: panel floats over the table within the card -->
|
|
59
|
+
<div class="pa-detail-view pa-detail-view--overlay">
|
|
60
|
+
<!-- Backdrop (click to close) -->
|
|
61
|
+
<div class="pa-detail-view__overlay" onclick="closeCardOverlayPanel()"></div>
|
|
62
|
+
|
|
63
|
+
<!-- Table (stays full width) -->
|
|
64
|
+
<div class="pa-detail-view__main">
|
|
65
|
+
<table class="pa-table pa-table--hover pa-table--striped">
|
|
66
|
+
<thead>
|
|
67
|
+
<tr>
|
|
68
|
+
<th>Name</th>
|
|
69
|
+
<th>Email</th>
|
|
70
|
+
<th>Role</th>
|
|
71
|
+
</tr>
|
|
72
|
+
</thead>
|
|
73
|
+
<tbody>
|
|
74
|
+
<tr class="is-selected" onclick="openCardOverlayPanel(1)">
|
|
75
|
+
<td>John Doe</td>
|
|
76
|
+
<td>john@example.com</td>
|
|
77
|
+
<td>Admin</td>
|
|
78
|
+
</tr>
|
|
79
|
+
<tr onclick="openCardOverlayPanel(2)">
|
|
80
|
+
<td>Jane Smith</td>
|
|
81
|
+
<td>jane@example.com</td>
|
|
82
|
+
<td>Editor</td>
|
|
83
|
+
</tr>
|
|
84
|
+
</tbody>
|
|
85
|
+
</table>
|
|
86
|
+
</div>
|
|
87
|
+
|
|
88
|
+
<!-- Detail panel (overlays the table) -->
|
|
89
|
+
<div class="pa-detail-view__panel pa-detail-view__panel--open">
|
|
90
|
+
<div class="pa-detail-panel__content">
|
|
91
|
+
<div class="pa-detail-panel-resize"></div>
|
|
92
|
+
<div class="pa-detail-panel__header">
|
|
93
|
+
<h4 class="pa-detail-panel__title">User Details</h4>
|
|
94
|
+
<button class="pa-detail-panel__close" onclick="closeCardOverlayPanel()">
|
|
95
|
+
<i class="fas fa-times"></i>
|
|
96
|
+
</button>
|
|
97
|
+
</div>
|
|
98
|
+
<div class="pa-detail-panel__body">
|
|
99
|
+
<p>Detail content goes here...</p>
|
|
100
|
+
</div>
|
|
101
|
+
<div class="pa-detail-panel__footer">
|
|
102
|
+
<button class="pa-btn pa-btn--primary pa-btn--sm">Edit</button>
|
|
103
|
+
<button class="pa-btn pa-btn--secondary pa-btn--sm">Delete</button>
|
|
104
|
+
</div>
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
</div>
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
<!-- =============================================
|
|
111
|
+
Detail Panel - Overlay Mode
|
|
112
|
+
============================================= -->
|
|
113
|
+
|
|
114
|
+
<!-- Trigger button (typically a table row click) -->
|
|
115
|
+
<button class="pa-btn pa-btn--primary" onclick="openOverlayPanel(1)">
|
|
116
|
+
Open Detail Panel
|
|
117
|
+
</button>
|
|
118
|
+
|
|
119
|
+
<!-- Overlay panel (fixed position, like profile panel) -->
|
|
120
|
+
<div class="pa-detail-panel--overlay" id="detailPanelOverlay">
|
|
121
|
+
<div class="pa-detail-panel__overlay" onclick="closeOverlayPanel()"></div>
|
|
122
|
+
<div class="pa-detail-panel__content">
|
|
123
|
+
<div class="pa-detail-panel-resize"></div>
|
|
124
|
+
<div class="pa-detail-panel__header">
|
|
125
|
+
<h4 class="pa-detail-panel__title">User Details</h4>
|
|
126
|
+
<button class="pa-detail-panel__close" onclick="closeOverlayPanel()">
|
|
127
|
+
<i class="fas fa-times"></i>
|
|
128
|
+
</button>
|
|
129
|
+
</div>
|
|
130
|
+
<div class="pa-detail-panel__body">
|
|
131
|
+
<p>Detail content goes here...</p>
|
|
132
|
+
</div>
|
|
133
|
+
<div class="pa-detail-panel__footer">
|
|
134
|
+
<button class="pa-btn pa-btn--primary pa-btn--sm">Edit</button>
|
|
135
|
+
<button class="pa-btn pa-btn--secondary pa-btn--sm">Delete</button>
|
|
136
|
+
</div>
|
|
137
|
+
</div>
|
|
138
|
+
</div>
|
|
@@ -443,6 +443,13 @@
|
|
|
443
443
|
// =========================================================================
|
|
444
444
|
--pa-profile-overlay-bg: #{$profile-overlay-bg};
|
|
445
445
|
|
|
446
|
+
// =========================================================================
|
|
447
|
+
// DETAIL PANEL COLORS
|
|
448
|
+
// =========================================================================
|
|
449
|
+
--pa-detail-panel-overlay-bg: #{$detail-panel-overlay-bg};
|
|
450
|
+
--pa-detail-panel-selected-bg: #{$detail-panel-selected-bg};
|
|
451
|
+
--pa-detail-panel-z-index: #{$detail-panel-z-index};
|
|
452
|
+
|
|
446
453
|
// =========================================================================
|
|
447
454
|
// COMMAND PALETTE COLORS
|
|
448
455
|
// =========================================================================
|
package/src/scss/_core.scss
CHANGED
|
@@ -98,8 +98,14 @@
|
|
|
98
98
|
// Popconfirm (anchored confirmation dialogs)
|
|
99
99
|
@use 'core-components/popconfirm' as *;
|
|
100
100
|
|
|
101
|
+
// Detail Panel
|
|
102
|
+
@use 'core-components/detail-panel' as *;
|
|
103
|
+
|
|
101
104
|
// Settings Panel
|
|
102
105
|
@use 'core-components/settings-panel' as *;
|
|
103
106
|
|
|
107
|
+
// Data Display (read-only fields)
|
|
108
|
+
@use 'core-components/data-display' as *;
|
|
109
|
+
|
|
104
110
|
// Utility classes and helpers
|
|
105
111
|
@use 'core-components/utilities' as *;
|
|
@@ -0,0 +1,347 @@
|
|
|
1
|
+
/* ========================================
|
|
2
|
+
Data Display Components
|
|
3
|
+
Read-only label-value field pairs
|
|
4
|
+
======================================== */
|
|
5
|
+
@use '../variables' as *;
|
|
6
|
+
|
|
7
|
+
// ============================================================================
|
|
8
|
+
// SINGLE FIELD (.pa-field)
|
|
9
|
+
// Default: stacked (label on top, value below)
|
|
10
|
+
// ============================================================================
|
|
11
|
+
|
|
12
|
+
.pa-field {
|
|
13
|
+
display: flex;
|
|
14
|
+
flex-direction: column;
|
|
15
|
+
gap: $field-gap;
|
|
16
|
+
|
|
17
|
+
&__label {
|
|
18
|
+
display: block;
|
|
19
|
+
font-size: $field-label-font-size;
|
|
20
|
+
font-weight: $field-label-font-weight;
|
|
21
|
+
opacity: $field-label-opacity;
|
|
22
|
+
line-height: $line-height-tight;
|
|
23
|
+
text-transform: uppercase;
|
|
24
|
+
letter-spacing: 0.05em;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
&__value {
|
|
28
|
+
display: block;
|
|
29
|
+
font-size: $field-value-font-size;
|
|
30
|
+
font-weight: $font-weight-normal;
|
|
31
|
+
line-height: $line-height-base;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
// Full-width modifier (spans entire row in grid layouts)
|
|
35
|
+
&--full {
|
|
36
|
+
grid-column: 1 / -1;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
// ------------------------------------------------------------------
|
|
40
|
+
// COPYABLE: copy value to clipboard
|
|
41
|
+
// ------------------------------------------------------------------
|
|
42
|
+
|
|
43
|
+
// Copy button always visible
|
|
44
|
+
&--copy-btn {
|
|
45
|
+
.pa-field__value {
|
|
46
|
+
display: flex;
|
|
47
|
+
align-items: center;
|
|
48
|
+
gap: $spacing-sm;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.pa-field__copy {
|
|
52
|
+
flex-shrink: 0;
|
|
53
|
+
padding: 0.4rem;
|
|
54
|
+
background: transparent;
|
|
55
|
+
border: none;
|
|
56
|
+
border-radius: $border-radius;
|
|
57
|
+
cursor: pointer;
|
|
58
|
+
opacity: 0.5;
|
|
59
|
+
transition: opacity 0.15s, background 0.15s;
|
|
60
|
+
|
|
61
|
+
&:hover {
|
|
62
|
+
opacity: 1;
|
|
63
|
+
background: rgba(128, 128, 128, 0.1);
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
// Click value to copy
|
|
69
|
+
&--copy-click {
|
|
70
|
+
.pa-field__value {
|
|
71
|
+
cursor: pointer;
|
|
72
|
+
transition: opacity 0.15s;
|
|
73
|
+
|
|
74
|
+
&:hover {
|
|
75
|
+
opacity: 0.7;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
&::after {
|
|
79
|
+
content: 'Click to copy';
|
|
80
|
+
font-size: $font-size-2xs;
|
|
81
|
+
opacity: 0;
|
|
82
|
+
margin-left: $spacing-sm;
|
|
83
|
+
transition: opacity 0.15s;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
&:hover::after {
|
|
87
|
+
opacity: 0.6;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
// Copy icon on hover only
|
|
93
|
+
&--copy-hover {
|
|
94
|
+
.pa-field__value {
|
|
95
|
+
display: flex;
|
|
96
|
+
align-items: center;
|
|
97
|
+
gap: $spacing-sm;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.pa-field__copy {
|
|
101
|
+
flex-shrink: 0;
|
|
102
|
+
padding: 0.4rem;
|
|
103
|
+
background: transparent;
|
|
104
|
+
border: none;
|
|
105
|
+
border-radius: $border-radius;
|
|
106
|
+
cursor: pointer;
|
|
107
|
+
opacity: 0;
|
|
108
|
+
transition: opacity 0.15s, background 0.15s;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
&:hover .pa-field__copy {
|
|
112
|
+
opacity: 0.5;
|
|
113
|
+
|
|
114
|
+
&:hover {
|
|
115
|
+
opacity: 1;
|
|
116
|
+
background: rgba(128, 128, 128, 0.1);
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
// Copied feedback state
|
|
122
|
+
&--copied {
|
|
123
|
+
.pa-field__value::after {
|
|
124
|
+
content: 'Copied!' !important;
|
|
125
|
+
opacity: 1 !important;
|
|
126
|
+
color: var(--pa-color-4, #28a745);
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
// ============================================================================
|
|
132
|
+
// FIELD GROUP (.pa-field-group)
|
|
133
|
+
// Labeled section containing .pa-fields (e.g., "Customer", "Delivery Address")
|
|
134
|
+
// ============================================================================
|
|
135
|
+
|
|
136
|
+
.pa-field-group {
|
|
137
|
+
display: flex;
|
|
138
|
+
flex-direction: column;
|
|
139
|
+
gap: $field-group-gap;
|
|
140
|
+
|
|
141
|
+
&__title {
|
|
142
|
+
font-size: $field-group-title-font-size;
|
|
143
|
+
font-weight: $field-group-title-font-weight;
|
|
144
|
+
line-height: $line-height-tight;
|
|
145
|
+
padding-bottom: $spacing-xs;
|
|
146
|
+
border-bottom: $border-width-thin solid $field-group-title-border-color;
|
|
147
|
+
margin: 0;
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
// Vertical spacing between consecutive field groups
|
|
152
|
+
.pa-field-group + .pa-field-group {
|
|
153
|
+
margin-top: $field-group-spacing;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
// Vertical spacing between consecutive pa-fields containers
|
|
157
|
+
.pa-fields + .pa-fields {
|
|
158
|
+
margin-top: $field-group-spacing;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
// ============================================================================
|
|
162
|
+
// FIELD CONTAINER (.pa-fields)
|
|
163
|
+
// Container for multiple .pa-field items
|
|
164
|
+
// ============================================================================
|
|
165
|
+
|
|
166
|
+
.pa-fields {
|
|
167
|
+
display: flex;
|
|
168
|
+
flex-direction: column;
|
|
169
|
+
gap: $fields-gap;
|
|
170
|
+
border-left: $fields-border-left;
|
|
171
|
+
padding-left: $fields-padding-left;
|
|
172
|
+
|
|
173
|
+
// ------------------------------------------------------------------
|
|
174
|
+
// GRID COLUMNS: multi-column layouts using CSS grid
|
|
175
|
+
// ------------------------------------------------------------------
|
|
176
|
+
&--cols-2,
|
|
177
|
+
&--cols-3,
|
|
178
|
+
&--cols-4 {
|
|
179
|
+
display: grid;
|
|
180
|
+
gap: $fields-cols-gap $fields-cols-gap;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
&--cols-2 { grid-template-columns: repeat(2, 1fr); }
|
|
184
|
+
&--cols-3 { grid-template-columns: repeat(3, 1fr); }
|
|
185
|
+
&--cols-4 { grid-template-columns: repeat(4, 1fr); }
|
|
186
|
+
|
|
187
|
+
@media (max-width: $mobile-breakpoint) {
|
|
188
|
+
&--cols-2,
|
|
189
|
+
&--cols-3,
|
|
190
|
+
&--cols-4 {
|
|
191
|
+
grid-template-columns: 1fr;
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
// ------------------------------------------------------------------
|
|
196
|
+
// HORIZONTAL: label left, value right (side-by-side)
|
|
197
|
+
// ------------------------------------------------------------------
|
|
198
|
+
&--horizontal {
|
|
199
|
+
.pa-field {
|
|
200
|
+
flex-direction: row;
|
|
201
|
+
align-items: baseline;
|
|
202
|
+
gap: $spacing-base;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
.pa-field__label {
|
|
206
|
+
flex: 0 0 auto;
|
|
207
|
+
min-width: 8rem;
|
|
208
|
+
max-width: 40%;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.pa-field__value {
|
|
212
|
+
flex: 1;
|
|
213
|
+
min-width: 0;
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
// ------------------------------------------------------------------
|
|
218
|
+
// TABLE: consistent label widths, like a key-value table
|
|
219
|
+
// ------------------------------------------------------------------
|
|
220
|
+
&--table {
|
|
221
|
+
.pa-field {
|
|
222
|
+
flex-direction: row;
|
|
223
|
+
align-items: baseline;
|
|
224
|
+
gap: $spacing-base;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.pa-field__label {
|
|
228
|
+
flex: 0 0 auto;
|
|
229
|
+
min-width: 8rem;
|
|
230
|
+
max-width: 40%;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.pa-field__value {
|
|
234
|
+
flex: 1;
|
|
235
|
+
min-width: 0;
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
// ------------------------------------------------------------------
|
|
240
|
+
// BORDERED: bottom border separator between fields
|
|
241
|
+
// ------------------------------------------------------------------
|
|
242
|
+
&--bordered {
|
|
243
|
+
.pa-field {
|
|
244
|
+
padding-bottom: $fields-bordered-padding;
|
|
245
|
+
border-bottom: $border-width-thin solid $fields-bordered-border-color;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
.pa-field:last-child {
|
|
249
|
+
border-bottom: none;
|
|
250
|
+
padding-bottom: 0;
|
|
251
|
+
}
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
// ------------------------------------------------------------------
|
|
255
|
+
// STRIPED: alternating background rows
|
|
256
|
+
// ------------------------------------------------------------------
|
|
257
|
+
&--striped {
|
|
258
|
+
.pa-field:nth-child(odd) {
|
|
259
|
+
background: var(--pa-table-stripe);
|
|
260
|
+
padding: $fields-bordered-padding;
|
|
261
|
+
border-radius: $border-radius;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
.pa-field:nth-child(even) {
|
|
265
|
+
padding: $fields-bordered-padding;
|
|
266
|
+
}
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
// ------------------------------------------------------------------
|
|
270
|
+
// COMPACT: tighter spacing
|
|
271
|
+
// ------------------------------------------------------------------
|
|
272
|
+
&--compact {
|
|
273
|
+
gap: $spacing-xs;
|
|
274
|
+
|
|
275
|
+
.pa-field {
|
|
276
|
+
gap: $spacing-xs;
|
|
277
|
+
}
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
// ------------------------------------------------------------------
|
|
281
|
+
// INLINE: multiple fields flowing on one line
|
|
282
|
+
// ------------------------------------------------------------------
|
|
283
|
+
&--inline {
|
|
284
|
+
flex-direction: row;
|
|
285
|
+
flex-wrap: wrap;
|
|
286
|
+
gap: $spacing-base;
|
|
287
|
+
|
|
288
|
+
.pa-field {
|
|
289
|
+
flex: 0 0 auto;
|
|
290
|
+
}
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
// ------------------------------------------------------------------
|
|
294
|
+
// RELAXED: larger gap between fields
|
|
295
|
+
// ------------------------------------------------------------------
|
|
296
|
+
&--relaxed {
|
|
297
|
+
gap: $fields-relaxed-gap;
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
// ------------------------------------------------------------------
|
|
301
|
+
// ROW: equal-width columns (auto based on child count)
|
|
302
|
+
// ------------------------------------------------------------------
|
|
303
|
+
&--row {
|
|
304
|
+
flex-direction: row;
|
|
305
|
+
|
|
306
|
+
.pa-field {
|
|
307
|
+
flex: 1;
|
|
308
|
+
min-width: 0;
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
@media (max-width: $mobile-breakpoint) {
|
|
312
|
+
flex-direction: column;
|
|
313
|
+
}
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
// ------------------------------------------------------------------
|
|
317
|
+
// FILLED: subtle background panel
|
|
318
|
+
// ------------------------------------------------------------------
|
|
319
|
+
&--filled {
|
|
320
|
+
background: $fields-filled-bg;
|
|
321
|
+
padding: $fields-filled-padding;
|
|
322
|
+
border-radius: $border-radius;
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
// ------------------------------------------------------------------
|
|
326
|
+
// COLOR VARIANTS: theme colors for border and filled background
|
|
327
|
+
// Uses --pa-color-{1-9} CSS variables
|
|
328
|
+
// ------------------------------------------------------------------
|
|
329
|
+
@for $i from 1 through 9 {
|
|
330
|
+
&--color-#{$i} {
|
|
331
|
+
border-left-color: var(--pa-color-#{$i});
|
|
332
|
+
|
|
333
|
+
// When combined with --filled, tint the background
|
|
334
|
+
&.pa-fields--filled {
|
|
335
|
+
background: color-mix(in srgb, var(--pa-color-#{$i}) 10%, transparent);
|
|
336
|
+
}
|
|
337
|
+
}
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
// ------------------------------------------------------------------
|
|
341
|
+
// NO BORDER: remove left border
|
|
342
|
+
// ------------------------------------------------------------------
|
|
343
|
+
&--no-border {
|
|
344
|
+
border-left: none;
|
|
345
|
+
padding-left: 0;
|
|
346
|
+
}
|
|
347
|
+
}
|