@agorapulse/ui-theme 20.1.0 → 20.1.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.
|
Binary file
|
|
@@ -0,0 +1,250 @@
|
|
|
1
|
+
.ap-table {
|
|
2
|
+
width: 100%;
|
|
3
|
+
overflow-x: auto;
|
|
4
|
+
font-family: Averta;
|
|
5
|
+
border-radius: var(--ref-border-radius-md);
|
|
6
|
+
border-collapse: separate;
|
|
7
|
+
border-spacing: 0;
|
|
8
|
+
background-color: var(--ref-color-white);
|
|
9
|
+
|
|
10
|
+
&.ap-table--outer-border {
|
|
11
|
+
border: 1px solid var(--ref-color-grey-20);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
&.ap-table--header-background th[cdk-header-cell] {
|
|
15
|
+
background-color: var(--ref-color-grey-05);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
&.ap-table--small td[cdk-cell] {
|
|
19
|
+
height: 40px;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
&.ap-table--striped tbody tr[cdk-row]:nth-child(even) {
|
|
23
|
+
background-color: var(--ref-color-grey-05);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
// Selected rows in striped tables - higher specificity to override striped background
|
|
27
|
+
&.ap-table--striped tbody tr[cdk-row].selected {
|
|
28
|
+
background-color: var(--ref-color-soft-blue-10);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
// Header cells - using CDK attribute selector
|
|
32
|
+
th[cdk-header-cell] {
|
|
33
|
+
padding: var(--ref-spacing-xs) var(--ref-spacing-sm);
|
|
34
|
+
text-align: left;
|
|
35
|
+
font-size: var(--ref-font-size-xs);
|
|
36
|
+
font-weight: var(--ref-font-weight-bold);
|
|
37
|
+
color: var(--ref-color-grey-100);
|
|
38
|
+
border: none;
|
|
39
|
+
border-bottom: 1px solid var(--ref-color-grey-20);
|
|
40
|
+
background-color: transparent;
|
|
41
|
+
position: sticky;
|
|
42
|
+
top: 0;
|
|
43
|
+
z-index: 1;
|
|
44
|
+
|
|
45
|
+
&:first-child {
|
|
46
|
+
border-top-left-radius: var(--ref-border-radius-md);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
&:last-child {
|
|
50
|
+
border-top-right-radius: var(--ref-border-radius-md);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
// Right-aligned header cells
|
|
54
|
+
&.ap-table__header-cell--right {
|
|
55
|
+
text-align: right;
|
|
56
|
+
justify-content: flex-end;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
// Checkbox header cells
|
|
60
|
+
&.ap-table__header-cell--checkbox {
|
|
61
|
+
width: 40px;
|
|
62
|
+
text-align: center;
|
|
63
|
+
justify-content: center;
|
|
64
|
+
padding: var(--ref-spacing-xs);
|
|
65
|
+
vertical-align: middle;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
// Body cells - using CDK attribute selector
|
|
70
|
+
td[cdk-cell] {
|
|
71
|
+
padding: var(--ref-spacing-xs);
|
|
72
|
+
font-size: var(--ref-font-size-sm);
|
|
73
|
+
color: var(--ref-color-grey-100);
|
|
74
|
+
border: none;
|
|
75
|
+
height: 52px;
|
|
76
|
+
vertical-align: middle;
|
|
77
|
+
font-family: Averta;
|
|
78
|
+
|
|
79
|
+
// Right-aligned body cells
|
|
80
|
+
&.ap-table__body-cell--right {
|
|
81
|
+
text-align: right;
|
|
82
|
+
justify-content: flex-end;
|
|
83
|
+
|
|
84
|
+
.ap-table__cell-content {
|
|
85
|
+
justify-content: flex-end;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
// Checkbox body cells
|
|
90
|
+
&.ap-table__body-cell--checkbox {
|
|
91
|
+
width: 40px;
|
|
92
|
+
text-align: center;
|
|
93
|
+
justify-content: center;
|
|
94
|
+
padding: var(--ref-spacing-xs);
|
|
95
|
+
vertical-align: middle;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
// Drag handle body cells
|
|
99
|
+
&.ap-table__body-cell--drag {
|
|
100
|
+
padding: 0 var(--ref-spacing-sm);
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
// Header rows - using CDK attribute selector
|
|
105
|
+
tr[cdk-header-row] {
|
|
106
|
+
// Header row specific styles can go here if needed
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
// Body rows - using CDK attribute selector
|
|
110
|
+
tr[cdk-row] {
|
|
111
|
+
border-bottom: 1px solid var(--ref-color-grey-20);
|
|
112
|
+
background-color: var(--ref-color-white);
|
|
113
|
+
|
|
114
|
+
&:last-child {
|
|
115
|
+
border-bottom: none;
|
|
116
|
+
|
|
117
|
+
td[cdk-cell]:first-child {
|
|
118
|
+
border-bottom-left-radius: var(--ref-border-radius-md);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
td[cdk-cell]:last-child {
|
|
122
|
+
border-bottom-right-radius: var(--ref-border-radius-md);
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
&:hover {
|
|
127
|
+
background-color: var(--ref-color-grey-05);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
&.selected {
|
|
131
|
+
background-color: var(--ref-color-soft-blue-10);
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
// Header and cell content wrappers for proper alignment
|
|
136
|
+
.ap-table__header-content {
|
|
137
|
+
display: flex;
|
|
138
|
+
align-items: center;
|
|
139
|
+
gap: var(--ref-spacing-xxxs);
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.ap-table__cell-content {
|
|
143
|
+
display: flex;
|
|
144
|
+
align-items: center;
|
|
145
|
+
gap: var(--ref-spacing-xxs);
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
// Text styling utilities - can be used directly on spans within cells
|
|
149
|
+
.ap-table__cell-text-container {
|
|
150
|
+
display: flex;
|
|
151
|
+
flex-direction: column;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.ap-table__cell-text {
|
|
155
|
+
color: var(--ref-color-grey-100);
|
|
156
|
+
font-size: var(--ref-font-size-sm);
|
|
157
|
+
|
|
158
|
+
&.ap-table__cell-text--bold {
|
|
159
|
+
font-weight: var(--ref-font-weight-bold);
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.ap-table__cell-description {
|
|
164
|
+
color: var(--ref-color-grey-80);
|
|
165
|
+
font-size: var(--ref-font-size-xs);
|
|
166
|
+
margin-top: 2px;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
// Action buttons alignment - can be used on action containers within cells
|
|
170
|
+
.ap-table__cell-actions {
|
|
171
|
+
display: flex;
|
|
172
|
+
align-items: center;
|
|
173
|
+
gap: var(--ref-spacing-xxxs);
|
|
174
|
+
margin-left: auto;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
// Spacing for labels and tags in table cells
|
|
178
|
+
.ap-table__cell-content {
|
|
179
|
+
&.ap-table__cell-content--items {
|
|
180
|
+
flex-wrap: wrap;
|
|
181
|
+
gap: var(--ref-spacing-xxxs);
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
// CDK Drag and Drop styling - applied globally
|
|
187
|
+
tr[cdk-row].cdk-drag-preview,
|
|
188
|
+
.cdk-drag-preview {
|
|
189
|
+
border-radius: var(--ref-border-radius-md);
|
|
190
|
+
background-color: var(--ref-color-electric-blue-10);
|
|
191
|
+
border: 1px solid var(--ref-color-electric-blue-40);
|
|
192
|
+
opacity: 0.95;
|
|
193
|
+
|
|
194
|
+
// Remove default table borders from preview
|
|
195
|
+
td[cdk-cell] {
|
|
196
|
+
border: none;
|
|
197
|
+
padding: var(--ref-spacing-xs);
|
|
198
|
+
font-size: var(--ref-font-size-sm);
|
|
199
|
+
color: var(--ref-color-grey-100);
|
|
200
|
+
font-family: Averta;
|
|
201
|
+
background-color: transparent;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
// Preserve text styling in drag preview
|
|
205
|
+
.ap-table__cell-text {
|
|
206
|
+
color: var(--ref-color-grey-100);
|
|
207
|
+
font-size: var(--ref-font-size-sm);
|
|
208
|
+
font-family: Averta;
|
|
209
|
+
|
|
210
|
+
&.ap-table__cell-text--bold {
|
|
211
|
+
font-weight: var(--ref-font-weight-bold);
|
|
212
|
+
}
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.cdk-drag-placeholder {
|
|
217
|
+
background-color: var(--ref-color-electric-blue-05) !important;
|
|
218
|
+
border: 1px dashed var(--ref-color-electric-blue-30) !important;
|
|
219
|
+
opacity: 0.7 !important;
|
|
220
|
+
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1) !important;
|
|
221
|
+
|
|
222
|
+
td[cdk-cell] {
|
|
223
|
+
border: none !important;
|
|
224
|
+
background-color: transparent !important;
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
.cdk-drag-animating {
|
|
229
|
+
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
// Dragging state styles
|
|
233
|
+
.cdk-drop-list-dragging .cdk-drag {
|
|
234
|
+
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
// Active dragging row state
|
|
238
|
+
tr[cdk-row].cdk-drag {
|
|
239
|
+
cursor: move;
|
|
240
|
+
|
|
241
|
+
&:hover {
|
|
242
|
+
background-color: var(--ref-color-soft-blue-05);
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
// Style while being dragged
|
|
246
|
+
&.cdk-drag-dragging {
|
|
247
|
+
background-color: var(--ref-color-red-05);
|
|
248
|
+
opacity: 0.7;
|
|
249
|
+
}
|
|
250
|
+
}
|
package/assets/style/theme.scss
CHANGED
package/package.json
CHANGED
|
Binary file
|