@trilogy-ds/styles 4.7.5-beta-1 → 4.8.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.
Files changed (9) hide show
  1. package/dist/default/trilogy-mangled.css +1 -1
  2. package/dist/default/trilogy-partials.css +1 -1
  3. package/dist/default/trilogy.css +1 -1
  4. package/framework/src/components/_autolayout.scss +106 -106
  5. package/framework/src/components/_box.scss +0 -4
  6. package/framework/src/components/_card.scss +0 -4
  7. package/framework/src/components/_index.scss +1 -0
  8. package/framework/src/components/_stack.scss +43 -0
  9. package/package.json +1 -1
package/framework/src/components/_autolayout.scss CHANGED
@@ -1,324 +1,324 @@
1
1
  body:not(.is-tight) {
2
- .accordion:not(:last-child) {
2
+ .accordion:not(.stack > .accordion):not(:last-child) {
3
3
  margin-bottom: 24px;
4
4
  }
5
- .buttons:not(:last-child) {
5
+ .buttons:not(.stack > .buttons):not(:last-child) {
6
6
  margin-bottom: 24px;
7
7
  }
8
- .card:not(:last-child) {
8
+ .card:not(.stack > .card):not(:last-child) {
9
9
  margin-bottom: 24px;
10
10
  }
11
- .columns:not(:last-child) {
11
+ .columns:not(.stack > .columns):not(:last-child) {
12
12
  margin-bottom: 24px;
13
13
  }
14
- .box:not(:last-child) {
14
+ .box:not(.stack > .box):not(:last-child) {
15
15
  margin-bottom: 24px;
16
16
  }
17
- .table:not(:last-child) {
17
+ .table:not(.stack > .table):not(:last-child) {
18
18
  margin-bottom: 24px;
19
19
  }
20
- .list:not(:last-child) {
20
+ .list:not(.stack > .list):not(:last-child) {
21
21
  margin-bottom: 24px;
22
22
  }
23
- .timeline:not(:last-child) {
23
+ .timeline:not(.stack > .timeline):not(:last-child) {
24
24
  margin-bottom: 24px;
25
25
  }
26
- .stepper:not(:last-child) {
26
+ .stepper:not(.stack > .stepper):not(:last-child) {
27
27
  margin-bottom: 24px;
28
28
  }
29
- .pagination:not(:last-child) {
29
+ .pagination:not(.stack > .pagination):not(:last-child) {
30
30
  margin-bottom: 24px;
31
31
  }
32
- .segmented-control:not(:last-child) {
32
+ .segmented-control:not(.stack > .segmented-control):not(:last-child) {
33
33
  margin-bottom: 24px;
34
34
  }
35
- .tabs:not(:last-child) {
35
+ .tabs:not(.stack > .tabs):not(:last-child) {
36
36
  margin-bottom: 24px;
37
37
  }
38
- .range:not(:last-child) {
38
+ .range:not(.stack > .range):not(:last-child) {
39
39
  margin-bottom: 24px;
40
40
  }
41
- .stepper:not(:last-child) {
41
+ .stepper:not(.stack > .stepper):not(:last-child) {
42
42
  margin-bottom: 24px;
43
43
  }
44
- .price-container:not(:last-child) {
44
+ .price-container:not(.stack > .price-container):not(:last-child) {
45
45
  margin-bottom: 12px;
46
46
  }
47
- :not(.buttons) > .button:not(:last-child) {
47
+ :not(.buttons) > .button:not(.stack > :not(.buttons) > .button):not(:last-child) {
48
48
  margin-bottom: 24px;
49
49
  }
50
- .countdown:not(:last-child) {
50
+ .countdown:not(.stack > .countdown):not(:last-child) {
51
51
  margin-bottom: 16px;
52
52
  }
53
- .countdown.is-small:not(:last-child) {
53
+ .countdown.is-small:not(.stack > .countdown.is-small):not(:last-child) {
54
54
  margin-bottom: 12px;
55
55
  }
56
- .chips-list:not(:last-child) {
56
+ .chips-list:not(.stack > .chips-list):not(:last-child) {
57
57
  margin-bottom: 12px;
58
58
  }
59
- p.text:not(:last-child) {
59
+ p.text:not(.stack > p.text):not(:last-child) {
60
60
  margin-bottom: 12px;
61
61
  }
62
- .progress:not(:last-child) {
62
+ .progress:not(.stack > .progress):not(:last-child) {
63
63
  margin-bottom: 8px;
64
64
  }
65
- .progress-radial:not(:last-child) {
65
+ .progress-radial:not(.stack > .progress-radial):not(:last-child) {
66
66
  margin-bottom: 8px;
67
67
  }
68
- .radios:not(:last-child) {
68
+ .radios:not(.stack > .radios):not(:last-child) {
69
69
  margin-bottom: 12px;
70
70
  }
71
- :not(.radios) >.radios:not(:last-child) {
71
+ :not(.radios) >.radios:not(.stack > :not(.radios) >.radios):not(:last-child) {
72
72
  margin-bottom: 12px;
73
73
  }
74
- .checkbox:not(:last-child) {
74
+ .checkbox:not(.stack > .checkbox):not(:last-child) {
75
75
  margin-bottom: 12px;
76
76
  }
77
- .switch:not(:last-child) {
77
+ .switch:not(.stack > .switch):not(:last-child) {
78
78
  margin-bottom: 12px;
79
79
  }
80
- .radio-tiles:not(:last-child) {
80
+ .radio-tiles:not(.stack > .radio-tiles):not(:last-child) {
81
81
  margin-bottom: 16px;
82
82
  }
83
- :not(.radio-tiles) > .radio-tile:not(:last-child) {
83
+ :not(.radio-tiles) > .radio-tile:not(.stack > :not(.radio-tiles) > .radio-tile):not(:last-child) {
84
84
  margin-bottom: 24px;
85
85
  }
86
- .checkbox-tiles:not(:last-child) {
86
+ .checkbox-tiles:not(.stack > .checkbox-tiles):not(:last-child) {
87
87
  margin-bottom: 24px;
88
88
  }
89
- :not(.checkbox-tiles) > .checkbox-tile:not(:last-child) {
89
+ :not(.checkbox-tiles) > .checkbox-tile:not(.stack > :not(.checkbox-tiles) > .checkbox-tile):not(:last-child) {
90
90
  margin-bottom: 24px;
91
91
  }
92
- .field:not(:last-child) {
92
+ .field:not(.stack > .field):not(:last-child) {
93
93
  margin-bottom: 24px;
94
94
  }
95
- .control:not(:last-child) {
95
+ .control:not(.stack > .control):not(:last-child) {
96
96
  margin-bottom: 4px;
97
97
  }
98
- .help:not(:last-child) {
98
+ .help:not(.stack > .help):not(:last-child) {
99
99
  margin-bottom: 4px;
100
100
  }
101
- .textarea:not(:last-child) {
101
+ .textarea:not(.stack > .textarea):not(:last-child) {
102
102
  margin-bottom: 16px;
103
103
  }
104
- .select:not(:last-child) {
104
+ .select:not(.stack > .select):not(:last-child) {
105
105
  margin-bottom: 16px;
106
106
  }
107
- .link:not(:last-child) {
107
+ .link:not(.stack > .link):not(:last-child) {
108
108
  margin-bottom: 12px;
109
109
  }
110
- .sticker:not(:last-child) {
110
+ .sticker:not(.stack > .sticker):not(:last-child) {
111
111
  margin-bottom: 8px;
112
112
  }
113
- .tags:not(:last-child) {
113
+ .tags:not(.stack > .tags):not(:last-child) {
114
114
  margin-bottom: 16px;
115
115
  }
116
- :not(.tags) > .tag:not(:last-child) {
116
+ :not(.tags) > .tag:not(.stack > :not(.tags) > .tag):not(:last-child) {
117
117
  margin-bottom: 8px;
118
118
  }
119
- .title.is-level-1:not(:last-child) {
119
+ .title.is-level-1:not(.stack > .title.is-level-1):not(:last-child) {
120
120
  margin-bottom: 40px;
121
121
  }
122
- .title.is-level-2:not(:last-child) {
122
+ .title.is-level-2:not(.stack > .title.is-level-2):not(:last-child) {
123
123
  margin-bottom: 40px;
124
124
  }
125
- .title.is-level-3:not(:last-child) {
125
+ .title.is-level-3:not(.stack > .title.is-level-3):not(:last-child) {
126
126
  margin-bottom: 24px;
127
127
  }
128
- .title.is-level-4:not(:last-child) {
128
+ .title.is-level-4:not(.stack > .title.is-level-4):not(:last-child) {
129
129
  margin-bottom: 24px;
130
130
  }
131
- .title.is-level-5:not(:last-child) {
131
+ .title.is-level-5:not(.stack > .title.is-level-5):not(:last-child) {
132
132
  margin-bottom: 16px;
133
133
  }
134
- .title.is-level-6:not(:last-child) {
134
+ .title.is-level-6:not(.stack > .title.is-level-6):not(:last-child) {
135
135
  margin-bottom: 8px;
136
136
  }
137
- .overline:not(:last-child) {
137
+ .overline:not(.stack > .overline):not(:last-child) {
138
138
  margin-bottom: 0px;
139
139
  }
140
- .title:has(+.subtitle):not(:last-child) {
140
+ .title:has(+.subtitle):not(.stack > .title:has(+.subtitle)):not(:last-child) {
141
141
  margin-bottom: 8px;
142
142
  }
143
- .title.is-level-1 + .subtitle:not(:last-child) {
143
+ .title.is-level-1 + .subtitle:not(.stack > .title.is-level-1 + .subtitle):not(:last-child) {
144
144
  margin-bottom: 32px;
145
145
  }
146
- .title.is-level-2 + .subtitle:not(:last-child) {
146
+ .title.is-level-2 + .subtitle:not(.stack > .title.is-level-2 + .subtitle):not(:last-child) {
147
147
  margin-bottom: 24px;
148
148
  }
149
- .title.is-level-3 + .subtitle:not(:last-child) {
149
+ .title.is-level-3 + .subtitle:not(.stack > .title.is-level-3 + .subtitle):not(:last-child) {
150
150
  margin-bottom: 24px;
151
151
  }
152
- .title.is-level-4 + .subtitle:not(:last-child) {
152
+ .title.is-level-4 + .subtitle:not(.stack > .title.is-level-4 + .subtitle):not(:last-child) {
153
153
  margin-bottom: 12px;
154
154
  }
155
- .title.is-level-5 + .subtitle:not(:last-child) {
155
+ .title.is-level-5 + .subtitle:not(.stack > .title.is-level-5 + .subtitle):not(:last-child) {
156
156
  margin-bottom: 12px;
157
157
  }
158
- .title.is-level-6 + .subtitle:not(:last-child) {
158
+ .title.is-level-6 + .subtitle:not(.stack > .title.is-level-6 + .subtitle):not(:last-child) {
159
159
  margin-bottom: 12px;
160
160
  }
161
161
  }
162
162
 
163
163
  @include mobile() {
164
164
  body:not(.is-tight) {
165
- .accordion:not(:last-child) {
165
+ .accordion:not(.stack > .accordion):not(:last-child) {
166
166
  margin-bottom: 16px;
167
167
  }
168
- .buttons:not(:last-child) {
168
+ .buttons:not(.stack > .buttons):not(:last-child) {
169
169
  margin-bottom: 16px;
170
170
  }
171
- .card:not(:last-child) {
171
+ .card:not(.stack > .card):not(:last-child) {
172
172
  margin-bottom: 16px;
173
173
  }
174
- .columns:not(:last-child) {
174
+ .columns:not(.stack > .columns):not(:last-child) {
175
175
  margin-bottom: 16px;
176
176
  }
177
- .box:not(:last-child) {
177
+ .box:not(.stack > .box):not(:last-child) {
178
178
  margin-bottom: 16px;
179
179
  }
180
- .table:not(:last-child) {
180
+ .table:not(.stack > .table):not(:last-child) {
181
181
  margin-bottom: 16px;
182
182
  }
183
- .list:not(:last-child) {
183
+ .list:not(.stack > .list):not(:last-child) {
184
184
  margin-bottom: 16px;
185
185
  }
186
- .timeline:not(:last-child) {
186
+ .timeline:not(.stack > .timeline):not(:last-child) {
187
187
  margin-bottom: 16px;
188
188
  }
189
- .stepper:not(:last-child) {
189
+ .stepper:not(.stack > .stepper):not(:last-child) {
190
190
  margin-bottom: 16px;
191
191
  }
192
- .pagination:not(:last-child) {
192
+ .pagination:not(.stack > .pagination):not(:last-child) {
193
193
  margin-bottom: 16px;
194
194
  }
195
- .segmented-control:not(:last-child) {
195
+ .segmented-control:not(.stack > .segmented-control):not(:last-child) {
196
196
  margin-bottom: 16px;
197
197
  }
198
- .tabs:not(:last-child) {
198
+ .tabs:not(.stack > .tabs):not(:last-child) {
199
199
  margin-bottom: 16px;
200
200
  }
201
- .range:not(:last-child) {
201
+ .range:not(.stack > .range):not(:last-child) {
202
202
  margin-bottom: 16px;
203
203
  }
204
- .stepper:not(:last-child) {
204
+ .stepper:not(.stack > .stepper):not(:last-child) {
205
205
  margin-bottom: 16px;
206
206
  }
207
- .price-container:not(:last-child) {
207
+ .price-container:not(.stack > .price-container):not(:last-child) {
208
208
  margin-bottom: 8px;
209
209
  }
210
- :not(.buttons) > .button:not(:last-child) {
210
+ :not(.buttons) > .button:not(.stack > :not(.buttons) > .button):not(:last-child) {
211
211
  margin-bottom: 16px;
212
212
  }
213
- .countdown:not(:last-child) {
213
+ .countdown:not(.stack > .countdown):not(:last-child) {
214
214
  margin-bottom: 12px;
215
215
  }
216
- .countdown.is-small:not(:last-child) {
216
+ .countdown.is-small:not(.stack > .countdown.is-small):not(:last-child) {
217
217
  margin-bottom: 12px;
218
218
  }
219
- .chips-list:not(:last-child) {
219
+ .chips-list:not(.stack > .chips-list):not(:last-child) {
220
220
  margin-bottom: 12px;
221
221
  }
222
- p.text:not(:last-child) {
222
+ p.text:not(.stack > p.text):not(:last-child) {
223
223
  margin-bottom: 12px;
224
224
  }
225
- .progress:not(:last-child) {
225
+ .progress:not(.stack > .progress):not(:last-child) {
226
226
  margin-bottom: 8px;
227
227
  }
228
- .progress-radial:not(:last-child) {
228
+ .progress-radial:not(.stack > .progress-radial):not(:last-child) {
229
229
  margin-bottom: 8px;
230
230
  }
231
- .radios:not(:last-child) {
231
+ .radios:not(.stack > .radios):not(:last-child) {
232
232
  margin-bottom: 12px;
233
233
  }
234
- :not(.radios) >.radios:not(:last-child) {
234
+ :not(.radios) >.radios:not(.stack > :not(.radios) >.radios):not(:last-child) {
235
235
  margin-bottom: 12px;
236
236
  }
237
- .checkbox:not(:last-child) {
237
+ .checkbox:not(.stack > .checkbox):not(:last-child) {
238
238
  margin-bottom: 12px;
239
239
  }
240
- .switch:not(:last-child) {
240
+ .switch:not(.stack > .switch):not(:last-child) {
241
241
  margin-bottom: 12px;
242
242
  }
243
- .radio-tiles:not(:last-child) {
243
+ .radio-tiles:not(.stack > .radio-tiles):not(:last-child) {
244
244
  margin-bottom: 12px;
245
245
  }
246
- :not(.radio-tiles) > .radio-tile:not(:last-child) {
246
+ :not(.radio-tiles) > .radio-tile:not(.stack > :not(.radio-tiles) > .radio-tile):not(:last-child) {
247
247
  margin-bottom: 16px;
248
248
  }
249
- .checkbox-tiles:not(:last-child) {
249
+ .checkbox-tiles:not(.stack > .checkbox-tiles):not(:last-child) {
250
250
  margin-bottom: 16px;
251
251
  }
252
- :not(.checkbox-tiles) > .checkbox-tile:not(:last-child) {
252
+ :not(.checkbox-tiles) > .checkbox-tile:not(.stack > :not(.checkbox-tiles) > .checkbox-tile):not(:last-child) {
253
253
  margin-bottom: 16px;
254
254
  }
255
- .field:not(:last-child) {
255
+ .field:not(.stack > .field):not(:last-child) {
256
256
  margin-bottom: 16px;
257
257
  }
258
- .control:not(:last-child) {
258
+ .control:not(.stack > .control):not(:last-child) {
259
259
  margin-bottom: 4px;
260
260
  }
261
- .help:not(:last-child) {
261
+ .help:not(.stack > .help):not(:last-child) {
262
262
  margin-bottom: 4px;
263
263
  }
264
- .textarea:not(:last-child) {
264
+ .textarea:not(.stack > .textarea):not(:last-child) {
265
265
  margin-bottom: 16px;
266
266
  }
267
- .select:not(:last-child) {
267
+ .select:not(.stack > .select):not(:last-child) {
268
268
  margin-bottom: 16px;
269
269
  }
270
- .link:not(:last-child) {
270
+ .link:not(.stack > .link):not(:last-child) {
271
271
  margin-bottom: 8px;
272
272
  }
273
- .sticker:not(:last-child) {
273
+ .sticker:not(.stack > .sticker):not(:last-child) {
274
274
  margin-bottom: 8px;
275
275
  }
276
- .tags:not(:last-child) {
276
+ .tags:not(.stack > .tags):not(:last-child) {
277
277
  margin-bottom: 16px;
278
278
  }
279
- :not(.tags) > .tag:not(:last-child) {
279
+ :not(.tags) > .tag:not(.stack > :not(.tags) > .tag):not(:last-child) {
280
280
  margin-bottom: 8px;
281
281
  }
282
- .title.is-level-1:not(:last-child) {
282
+ .title.is-level-1:not(.stack > .title.is-level-1):not(:last-child) {
283
283
  margin-bottom: 32px;
284
284
  }
285
- .title.is-level-2:not(:last-child) {
285
+ .title.is-level-2:not(.stack > .title.is-level-2):not(:last-child) {
286
286
  margin-bottom: 32px;
287
287
  }
288
- .title.is-level-3:not(:last-child) {
288
+ .title.is-level-3:not(.stack > .title.is-level-3):not(:last-child) {
289
289
  margin-bottom: 24px;
290
290
  }
291
- .title.is-level-4:not(:last-child) {
291
+ .title.is-level-4:not(.stack > .title.is-level-4):not(:last-child) {
292
292
  margin-bottom: 16px;
293
293
  }
294
- .title.is-level-5:not(:last-child) {
294
+ .title.is-level-5:not(.stack > .title.is-level-5):not(:last-child) {
295
295
  margin-bottom: 12px;
296
296
  }
297
- .title.is-level-6:not(:last-child) {
297
+ .title.is-level-6:not(.stack > .title.is-level-6):not(:last-child) {
298
298
  margin-bottom: 12px;
299
299
  }
300
- .overline:not(:last-child) {
300
+ .overline:not(.stack > .overline):not(:last-child) {
301
301
  margin-bottom: 0px;
302
302
  }
303
- .title:has(+.subtitle):not(:last-child) {
303
+ .title:has(+.subtitle):not(.stack > .title:has(+.subtitle)):not(:last-child) {
304
304
  margin-bottom: 8px;
305
305
  }
306
- .title.is-level-1 + .subtitle:not(:last-child) {
306
+ .title.is-level-1 + .subtitle:not(.stack > .title.is-level-1 + .subtitle):not(:last-child) {
307
307
  margin-bottom: 40px;
308
308
  }
309
- .title.is-level-2 + .subtitle:not(:last-child) {
309
+ .title.is-level-2 + .subtitle:not(.stack > .title.is-level-2 + .subtitle):not(:last-child) {
310
310
  margin-bottom: 32px;
311
311
  }
312
- .title.is-level-3 + .subtitle:not(:last-child) {
312
+ .title.is-level-3 + .subtitle:not(.stack > .title.is-level-3 + .subtitle):not(:last-child) {
313
313
  margin-bottom: 32px;
314
314
  }
315
- .title.is-level-4 + .subtitle:not(:last-child) {
315
+ .title.is-level-4 + .subtitle:not(.stack > .title.is-level-4 + .subtitle):not(:last-child) {
316
316
  margin-bottom: 8px;
317
317
  }
318
- .title.is-level-5 + .subtitle:not(:last-child) {
318
+ .title.is-level-5 + .subtitle:not(.stack > .title.is-level-5 + .subtitle):not(:last-child) {
319
319
  margin-bottom: 8px;
320
320
  }
321
- .title.is-level-6 + .subtitle:not(:last-child) {
321
+ .title.is-level-6 + .subtitle:not(.stack > .title.is-level-6 + .subtitle):not(:last-child) {
322
322
  margin-bottom: 8px;
323
323
  }
324
324
 
package/framework/src/components/_box.scss CHANGED
@@ -32,10 +32,6 @@ a.box {
32
32
  position: relative;
33
33
  padding: var(--padding-box);
34
34
 
35
- &:not(:last-child) {
36
- margin-bottom: 15px;
37
- }
38
-
39
35
  &.is-active {
40
36
  outline: var(--border-active);
41
37
  }
package/framework/src/components/_card.scss CHANGED
@@ -16,10 +16,6 @@ $basis-values: (
16
16
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
17
17
  background-color: getColor('background');
18
18
 
19
- &:not(:last-child) {
20
- margin-bottom: 15px;
21
- }
22
-
23
19
  &:not(.is-reversed) .card-image {
24
20
  order: 1;
25
21
  }
package/framework/src/components/_index.scss CHANGED
@@ -34,6 +34,7 @@
34
34
  @import 'scroll-view';
35
35
  @import 'segmented-control';
36
36
  @import 'select';
37
+ @import 'stack';
37
38
  @import 'stepper';
38
39
  @import 'sticker';
39
40
  @import 'switch';
package/framework/src/components/_stack.scss ADDED
@@ -0,0 +1,43 @@
1
+ $gap: 4px,8px,12px,16px,24px,32px,40px,48px,54px,62px;
2
+
3
+ .stack {
4
+ display: flex;
5
+
6
+ &.is-column {
7
+ flex-direction: column;
8
+ }
9
+
10
+ &.is-row {
11
+ flex-direction: row;
12
+ }
13
+
14
+
15
+
16
+ @for $i from 1 through length($gap) {
17
+ $item: nth($gap, $i);
18
+ &.has-gap-#{$i}{
19
+ gap: $item;
20
+ }
21
+
22
+ @include mobile {
23
+ &.has-gap-mobile-#{$i} {
24
+ gap: $item;
25
+ }
26
+ }
27
+
28
+ @include tablet {
29
+ &.has-gap-tablet-#{$i} {
30
+ gap: $item;
31
+ }
32
+ }
33
+
34
+ @include desktop {
35
+ &.has-gap-desktop-#{$i} {
36
+ gap: $item;
37
+ }
38
+ }
39
+ }
40
+
41
+
42
+
43
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trilogy-ds/styles",
3
- "version": "4.7.5-beta-1",
3
+ "version": "4.8.0",
4
4
  "author": "Bouygues Telecom",
5
5
  "license": "UNLICENSED",
6
6
  "files": [