pacem-less 0.53.0-lagrange → 0.53.0-lebesgue
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/pacem/layout/dark/cards.less +174 -102
- package/pacem/ui/dark/collapse.less +9 -6
- package/package.json +1 -1
|
@@ -2,83 +2,173 @@
|
|
|
2
2
|
|
|
3
3
|
@_card_ribbon_padding: 2 * @grid_spacing / 3;
|
|
4
4
|
@_radius: @border_card_radius;
|
|
5
|
+
@_h_height: @grid_spacing * 3.5 + @grid_cell;
|
|
5
6
|
|
|
6
7
|
.@{PCSS}-card {
|
|
7
8
|
.Panel(card);
|
|
8
|
-
display:
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
9
|
+
display: grid;
|
|
10
|
+
grid-template-columns: auto 1fr auto;
|
|
11
|
+
//grid-template-rows: minmax(@_h_height,auto) auto auto;
|
|
12
|
+
grid-template-rows: repeat(4, auto);
|
|
13
|
+
grid-template-areas: 'ribbon ribbon ribbon' 'heading heading heading' 'body body body' 'footer footer footer';
|
|
14
|
+
|
|
15
|
+
> .card-heading,
|
|
16
|
+
> .card-tools,
|
|
17
|
+
> .card-body,
|
|
18
|
+
> .card-footer {
|
|
19
|
+
order: 1;
|
|
20
|
+
z-index: 1;
|
|
21
|
+
}
|
|
13
22
|
|
|
14
|
-
.card-body {
|
|
15
|
-
|
|
16
|
-
padding-top: @grid_spacing/2;
|
|
23
|
+
> .card-body {
|
|
24
|
+
grid-area: body;
|
|
25
|
+
//padding-top: @grid_spacing/2;
|
|
17
26
|
}
|
|
18
27
|
|
|
19
|
-
|
|
20
|
-
|
|
28
|
+
> .card-heading {
|
|
29
|
+
grid-area: heading;
|
|
30
|
+
box-sizing: border-box;/*
|
|
31
|
+
display: flex;
|
|
32
|
+
align-items: flex-end;
|
|
33
|
+
justify-content: flex-start;*/
|
|
34
|
+
//height: @_h_height;
|
|
35
|
+
// align-self: end;
|
|
36
|
+
//display: block;
|
|
37
|
+
text-align: center;
|
|
21
38
|
}
|
|
22
39
|
|
|
23
|
-
|
|
40
|
+
> .card-img when (@shadows = true) {
|
|
41
|
+
box-shadow: inset 0 -@grid_spacing/8 @grid_spacing rgba(0,0,0,0.5);
|
|
42
|
+
}
|
|
24
43
|
|
|
25
|
-
.card-
|
|
26
|
-
|
|
44
|
+
> .card-heading when (@shadows = false) {
|
|
45
|
+
color: #fff;
|
|
46
|
+
text-shadow: 1px 1px 2px rgba(0,0,0,0.75);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
> .card-img {
|
|
51
|
+
grid-column: ~"1 / -1";
|
|
52
|
+
grid-row: ~"1 / 3";
|
|
53
|
+
order: 0;
|
|
27
54
|
z-index: 0;
|
|
28
|
-
|
|
29
|
-
|
|
55
|
+
height: 100%;
|
|
56
|
+
width: 100%;
|
|
30
57
|
top: 0;
|
|
31
58
|
left: 0;
|
|
59
|
+
position: absolute;
|
|
32
60
|
border-top-left-radius: @_radius;
|
|
33
61
|
border-top-right-radius: @_radius;
|
|
34
62
|
overflow: hidden;
|
|
63
|
+
|
|
64
|
+
&.img-auto {
|
|
65
|
+
position: static;
|
|
66
|
+
height: auto;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
&.img-top {
|
|
70
|
+
grid-row: ~"1 / 2";
|
|
71
|
+
|
|
72
|
+
& ~ .card-heading {
|
|
73
|
+
text-shadow: none;
|
|
74
|
+
color: inherit;
|
|
75
|
+
text-align: start;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
35
78
|
}
|
|
36
79
|
|
|
37
|
-
.card-
|
|
38
|
-
|
|
80
|
+
> .card-ribbon {
|
|
81
|
+
grid-area: ribbon;
|
|
82
|
+
order: 2;
|
|
83
|
+
z-index: 2;
|
|
84
|
+
align-self: center;
|
|
85
|
+
justify-self: center;
|
|
86
|
+
margin-top: @grid_spacing * 2;
|
|
87
|
+
margin-bottom: @grid_spacing;
|
|
88
|
+
margin-right: 2*@grid_spacing/3;
|
|
89
|
+
margin-left: $margin-right;
|
|
39
90
|
}
|
|
40
91
|
|
|
41
|
-
.card-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
justify-content: flex-start;
|
|
46
|
-
height: @_h_height;
|
|
92
|
+
> .card-img.img-top {
|
|
93
|
+
& ~ .card-ribbon {
|
|
94
|
+
margin-bottom: 2 * @grid_spacing;
|
|
95
|
+
}
|
|
47
96
|
}
|
|
48
97
|
|
|
49
|
-
.card-
|
|
50
|
-
|
|
51
|
-
text-shadow: 1px 1px 2px rgba(0,0,0,0.75);
|
|
98
|
+
> .card-tools {
|
|
99
|
+
// top: @grid_spacing/1.5;
|
|
52
100
|
}
|
|
53
101
|
|
|
54
|
-
.card-
|
|
55
|
-
|
|
102
|
+
> .card-footer {
|
|
103
|
+
grid-area: footer;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
> .card-tools {
|
|
107
|
+
grid-column: 3;
|
|
108
|
+
grid-row: 1;
|
|
109
|
+
padding: @panel_spacing;
|
|
110
|
+
// reset
|
|
111
|
+
position: static;
|
|
112
|
+
// override
|
|
113
|
+
align-self: start;
|
|
114
|
+
display: flex;
|
|
115
|
+
flex-direction: row;
|
|
116
|
+
flex-wrap: nowrap;
|
|
117
|
+
align-items: center;
|
|
56
118
|
}
|
|
57
119
|
}
|
|
58
120
|
|
|
59
121
|
.@{PCSS}-card.card-full {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
.card-img {
|
|
122
|
+
grid-template-areas: 'ribbon ribbon tools' 'ribbon ribbon .' 'heading heading heading' 'body body body' 'footer footer footer';
|
|
123
|
+
min-height: @_h_height;
|
|
124
|
+
grid-template-rows: auto 1fr repeat(3, auto);
|
|
125
|
+
|
|
126
|
+
> .card-img {
|
|
127
|
+
position: absolute;
|
|
65
128
|
height: 100%;
|
|
129
|
+
width: 100%;
|
|
66
130
|
box-shadow: none;
|
|
131
|
+
grid-row: ~"1 / -1";
|
|
67
132
|
border-bottom-left-radius: @_radius;
|
|
68
133
|
border-bottom-right-radius: @_radius;
|
|
69
134
|
}
|
|
70
135
|
|
|
71
|
-
|
|
136
|
+
> .card-heading {
|
|
137
|
+
height: @_h_height;
|
|
138
|
+
display: flex;
|
|
139
|
+
align-items: flex-end;
|
|
140
|
+
text-align: start;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
> .card-body,
|
|
144
|
+
> .card-footer {
|
|
72
145
|
color: rgba(255,255,255,0.8);
|
|
73
146
|
text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
|
|
74
147
|
}
|
|
148
|
+
|
|
149
|
+
> .card-ribbon {
|
|
150
|
+
margin: 0;
|
|
151
|
+
grid-area: unset;
|
|
152
|
+
position: absolute;
|
|
153
|
+
left: @_card_ribbon_padding;
|
|
154
|
+
top: $left;
|
|
155
|
+
}
|
|
75
156
|
}
|
|
76
157
|
|
|
77
158
|
.CardSide() {
|
|
78
159
|
display: grid;
|
|
79
160
|
|
|
161
|
+
> .card-ribbon {
|
|
162
|
+
margin: 0;
|
|
163
|
+
grid-area: unset;
|
|
164
|
+
position: absolute;
|
|
165
|
+
left: @_card_ribbon_padding;
|
|
166
|
+
top: $left;
|
|
167
|
+
}
|
|
168
|
+
|
|
80
169
|
> .card-heading {
|
|
81
170
|
grid-area: heading;
|
|
171
|
+
text-align: start;
|
|
82
172
|
}
|
|
83
173
|
|
|
84
174
|
> .card-body {
|
|
@@ -90,7 +180,7 @@
|
|
|
90
180
|
}
|
|
91
181
|
|
|
92
182
|
> .card-img {
|
|
93
|
-
position:
|
|
183
|
+
position: relative;
|
|
94
184
|
grid-area: img;
|
|
95
185
|
height: 100%;
|
|
96
186
|
//display: block;
|
|
@@ -111,6 +201,7 @@
|
|
|
111
201
|
box-sizing: border-box;
|
|
112
202
|
padding-top: 2 * @grid_spacing / 3;
|
|
113
203
|
height: auto;
|
|
204
|
+
text-align: start;
|
|
114
205
|
}
|
|
115
206
|
|
|
116
207
|
.card-heading when (@shadows = false) {
|
|
@@ -118,21 +209,9 @@
|
|
|
118
209
|
text-shadow: none;
|
|
119
210
|
}
|
|
120
211
|
|
|
121
|
-
|
|
212
|
+
.card-tools {
|
|
122
213
|
grid-area: tools;
|
|
123
214
|
align-self: center;
|
|
124
|
-
padding: 0 @panel_spacing 0 0;
|
|
125
|
-
// reset
|
|
126
|
-
position: static;
|
|
127
|
-
top: 0;
|
|
128
|
-
right: 0;
|
|
129
|
-
z-index: auto;
|
|
130
|
-
// override
|
|
131
|
-
align-self: stretch;
|
|
132
|
-
display: flex;
|
|
133
|
-
flex-direction: row;
|
|
134
|
-
flex-wrap: nowrap;
|
|
135
|
-
align-items: center;
|
|
136
215
|
}
|
|
137
216
|
}
|
|
138
217
|
|
|
@@ -185,16 +264,15 @@
|
|
|
185
264
|
|
|
186
265
|
/* #region RIBBON */
|
|
187
266
|
.CardRibbon(@_size) {
|
|
188
|
-
@_padding: @_card_ribbon_padding;
|
|
189
267
|
width: @_size;
|
|
190
268
|
height: @_size;
|
|
191
|
-
left: @_padding;
|
|
192
|
-
top: @_padding;
|
|
193
269
|
@_brd: floor(@_size / 11.5);
|
|
194
270
|
|
|
195
271
|
display: flex;
|
|
196
272
|
align-items: center;
|
|
197
273
|
justify-content: center;
|
|
274
|
+
overflow: hidden;
|
|
275
|
+
box-sizing: border-box;
|
|
198
276
|
|
|
199
277
|
&.ribbon-border,
|
|
200
278
|
&.border {
|
|
@@ -223,59 +301,58 @@
|
|
|
223
301
|
.CardRibbon(@grid_cell + @grid_spacing * 2 / 3);
|
|
224
302
|
}
|
|
225
303
|
|
|
226
|
-
.@{PCSS}-card .card-ribbon {
|
|
227
|
-
position: absolute;
|
|
228
|
-
z-index: 2
|
|
304
|
+
.@{PCSS}-card > .card-ribbon {
|
|
305
|
+
/*position: absolute;
|
|
306
|
+
z-index: 2;*/
|
|
229
307
|
.CardRibbon();
|
|
230
308
|
border-radius: @_radius;
|
|
309
|
+
// avoid declaring default colors, since they will override any fill-specific classes for the ribbon (e.g. 'fill-primary-container').
|
|
310
|
+
/*background-color: ~"var(--@{PCSS}-color-background)";
|
|
311
|
+
color: ~"var(--@{PCSS}-color-default)";*/
|
|
231
312
|
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
background-color: @color_accent;
|
|
238
|
-
color: @color_accent_inv;
|
|
239
|
-
}
|
|
313
|
+
&.accent,
|
|
314
|
+
&.ribbon-accent {
|
|
315
|
+
background-color: @color_accent;
|
|
316
|
+
color: @color_accent_inv;
|
|
317
|
+
}
|
|
240
318
|
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
319
|
+
&.danger,
|
|
320
|
+
&.ribbon-danger {
|
|
321
|
+
background-color: @color_danger;
|
|
322
|
+
color: @color_danger_inv;
|
|
323
|
+
}
|
|
246
324
|
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
325
|
+
&.primary,
|
|
326
|
+
&.ribbon-primary {
|
|
327
|
+
background-color: @color_primary;
|
|
328
|
+
color: @color_primary_inv;
|
|
329
|
+
}
|
|
252
330
|
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
331
|
+
&.success,
|
|
332
|
+
&.ribbon-success {
|
|
333
|
+
background-color: @color_success;
|
|
334
|
+
color: @color_success_inv;
|
|
335
|
+
}
|
|
258
336
|
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
337
|
+
&.ribbon-invert {
|
|
338
|
+
background-color: @color_default;
|
|
339
|
+
color: @color_default_inv;
|
|
340
|
+
}
|
|
263
341
|
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
342
|
+
&.ribbon-disabled {
|
|
343
|
+
background-color: @color_disabled;
|
|
344
|
+
color: @color_disabled_inv;
|
|
345
|
+
}
|
|
268
346
|
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
347
|
+
&.ribbon-default {
|
|
348
|
+
background-color: @color_default_inv;
|
|
349
|
+
color: @color_default;
|
|
350
|
+
}
|
|
273
351
|
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
}
|
|
352
|
+
&.warning,
|
|
353
|
+
&.ribbon-warning {
|
|
354
|
+
background-color: @color_warning;
|
|
355
|
+
color: @color_warning_inv;
|
|
279
356
|
}
|
|
280
357
|
|
|
281
358
|
&.circular,
|
|
@@ -283,11 +360,6 @@
|
|
|
283
360
|
border-radius: 50%;
|
|
284
361
|
}
|
|
285
362
|
|
|
286
|
-
&.border,
|
|
287
|
-
&.ribbon-border {
|
|
288
|
-
box-sizing: border-box;
|
|
289
|
-
}
|
|
290
|
-
|
|
291
363
|
&.ribbon-small,
|
|
292
364
|
&.ribbon-md {
|
|
293
365
|
.CardRibbon(@grid_cell);
|
|
@@ -318,16 +390,16 @@
|
|
|
318
390
|
color: @color_default;
|
|
319
391
|
|
|
320
392
|
.card-body, .card-heading, .card-footer {
|
|
321
|
-
z-index: 1;
|
|
393
|
+
//z-index: 1;
|
|
322
394
|
position: relative;
|
|
323
395
|
}
|
|
324
396
|
|
|
325
397
|
.card-img {
|
|
326
|
-
z-index: 0;
|
|
398
|
+
//z-index: 0;
|
|
327
399
|
}
|
|
328
400
|
|
|
329
401
|
.card-ribbon {
|
|
330
|
-
z-index: 2;
|
|
402
|
+
//z-index: 2;
|
|
331
403
|
}
|
|
332
404
|
}
|
|
333
405
|
|
|
@@ -5,16 +5,19 @@
|
|
|
5
5
|
overflow: hidden !important;
|
|
6
6
|
transition: height .35s @easing_in_out_sine;
|
|
7
7
|
|
|
8
|
-
&.@{PCSS}-horizontal {
|
|
9
|
-
transition: width .35s @easing_in_out_sine;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
|
|
13
8
|
&::part(container) {
|
|
14
9
|
position: relative;
|
|
15
10
|
}
|
|
16
11
|
|
|
17
12
|
&::part(content) {
|
|
18
|
-
position:
|
|
13
|
+
position: static;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
&.@{PCSS}-horizontal {
|
|
17
|
+
transition: width .35s @easing_in_out_sine;
|
|
18
|
+
|
|
19
|
+
&::part(content) {
|
|
20
|
+
position: absolute;
|
|
21
|
+
}
|
|
19
22
|
}
|
|
20
23
|
}
|
package/package.json
CHANGED