@trilogy-ds/styles 4.8.2-beta-2 → 4.8.2

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 (14) 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/base/_helpers.scss +14 -4
  5. package/framework/src/base/_loading.scss +1 -1
  6. package/framework/src/components/_autolayout.scss +112 -106
  7. package/framework/src/components/_button.scss +3 -0
  8. package/framework/src/components/_flex-box.scss +240 -0
  9. package/framework/src/components/_index.scss +1 -1
  10. package/framework/src/components/_segmented-control.scss +0 -1
  11. package/framework/src/components/input/_form.scss +2 -2
  12. package/framework/src/utilities/mixins/_spinner.scss +2 -2
  13. package/package.json +1 -1
  14. package/framework/src/components/_stack.scss +0 -43
package/framework/src/base/_helpers.scss CHANGED
@@ -618,13 +618,23 @@ $radius-list: ['radius-large', 'radius-medium', 'radius-small', 'radius'];
618
618
  }
619
619
  }
620
620
 
621
- $positions: (
621
+ $justify-values: (
622
622
  'center': 'center',
623
- 'start': 'flex-start',
624
623
  'end': 'flex-end',
624
+ 'space-between': 'space-between',
625
+ 'space-around': 'space-around',
626
+ 'space-evenly': 'space-evenly',
627
+ 'start': 'flex-start'
628
+ );
629
+
630
+ $align-values: (
631
+ 'center': 'center',
632
+ 'end': 'flex-end',
633
+ 'start': 'flex-start',
634
+ 'stretch': 'stretch'
625
635
  );
626
636
 
627
- @each $justification, $justify-content in $positions {
637
+ @each $justification, $justify-content in $justify-values {
628
638
 
629
639
  .is-justified-self-#{$justification} {
630
640
  justify-self: #{$justify-content} !important;
@@ -775,7 +785,7 @@ $positions: (
775
785
  }
776
786
  }
777
787
 
778
- @each $alignment, $align-items in $positions {
788
+ @each $alignment, $align-items in $align-values {
779
789
  .is-aligned-#{$alignment} {
780
790
  align-items: #{$align-items} !important;
781
791
  }
package/framework/src/base/_loading.scss CHANGED
@@ -36,7 +36,7 @@ p.is-loading,
36
36
  visibility: hidden;
37
37
  }
38
38
  &::after {
39
- @include spinner;
39
+ @include spinner();
40
40
  @include center(1em);
41
41
  position: absolute !important;
42
42
  }
package/framework/src/components/_autolayout.scss CHANGED
@@ -1,324 +1,330 @@
1
1
  body:not(.is-tight) {
2
- .accordion:not(.stack > .accordion):not(:last-child) {
2
+ .accordion:not(.flex-box > .accordion):not(:last-child) {
3
3
  margin-bottom: 24px;
4
4
  }
5
- .buttons:not(.stack > .buttons):not(:last-child) {
5
+ .buttons:not(.flex-box > .buttons):not(:last-child) {
6
6
  margin-bottom: 24px;
7
7
  }
8
- .card:not(.stack > .card):not(:last-child) {
8
+ .card:not(.flex-box > .card):not(:last-child) {
9
9
  margin-bottom: 24px;
10
10
  }
11
- .columns:not(.stack > .columns):not(:last-child) {
11
+ .columns:not(.flex-box > .columns):not(:last-child) {
12
12
  margin-bottom: 24px;
13
13
  }
14
- .box:not(.stack > .box):not(:last-child) {
14
+ .flex-box:not(.flex-box > .flex-box):not(:last-child) {
15
15
  margin-bottom: 24px;
16
16
  }
17
- .table:not(.stack > .table):not(:last-child) {
17
+ .box:not(.flex-box > .box):not(:last-child) {
18
18
  margin-bottom: 24px;
19
19
  }
20
- .list:not(.stack > .list):not(:last-child) {
20
+ .table:not(.flex-box > .table):not(:last-child) {
21
21
  margin-bottom: 24px;
22
22
  }
23
- .timeline:not(.stack > .timeline):not(:last-child) {
23
+ .list:not(.flex-box > .list):not(:last-child) {
24
24
  margin-bottom: 24px;
25
25
  }
26
- .stepper:not(.stack > .stepper):not(:last-child) {
26
+ .timeline:not(.flex-box > .timeline):not(:last-child) {
27
27
  margin-bottom: 24px;
28
28
  }
29
- .pagination:not(.stack > .pagination):not(:last-child) {
29
+ .stepper:not(.flex-box > .stepper):not(:last-child) {
30
30
  margin-bottom: 24px;
31
31
  }
32
- .segmented-control:not(.stack > .segmented-control):not(:last-child) {
32
+ .pagination:not(.flex-box > .pagination):not(:last-child) {
33
33
  margin-bottom: 24px;
34
34
  }
35
- .tabs:not(.stack > .tabs):not(:last-child) {
35
+ .segmented-control:not(.flex-box > .segmented-control):not(:last-child) {
36
36
  margin-bottom: 24px;
37
37
  }
38
- .range:not(.stack > .range):not(:last-child) {
38
+ .tabs:not(.flex-box > .tabs):not(:last-child) {
39
39
  margin-bottom: 24px;
40
40
  }
41
- .stepper:not(.stack > .stepper):not(:last-child) {
41
+ .range:not(.flex-box > .range):not(:last-child) {
42
42
  margin-bottom: 24px;
43
43
  }
44
- .price-container:not(.stack > .price-container):not(:last-child) {
44
+ .stepper:not(.flex-box > .stepper):not(:last-child) {
45
+ margin-bottom: 24px;
46
+ }
47
+ .price-container:not(.flex-box > .price-container):not(:last-child) {
45
48
  margin-bottom: 12px;
46
49
  }
47
- :not(.buttons) > .button:not(.stack > :not(.buttons) > .button):not(:last-child) {
50
+ :not(.buttons) > .button:not(.flex-box > .button):not(:last-child) {
48
51
  margin-bottom: 24px;
49
52
  }
50
- .countdown:not(.stack > .countdown):not(:last-child) {
53
+ .countdown:not(.flex-box > .countdown):not(:last-child) {
51
54
  margin-bottom: 16px;
52
55
  }
53
- .countdown.is-small:not(.stack > .countdown.is-small):not(:last-child) {
56
+ .countdown.is-small:not(.flex-box > .countdown.is-small):not(:last-child) {
54
57
  margin-bottom: 12px;
55
58
  }
56
- .chips-list:not(.stack > .chips-list):not(:last-child) {
59
+ .chips-list:not(.flex-box > .chips-list):not(:last-child) {
57
60
  margin-bottom: 12px;
58
61
  }
59
- p.text:not(.stack > p.text):not(:last-child) {
62
+ p.text:not(.flex-box > p.text):not(:last-child) {
60
63
  margin-bottom: 12px;
61
64
  }
62
- .progress:not(.stack > .progress):not(:last-child) {
65
+ .progress:not(.flex-box > .progress):not(:last-child) {
63
66
  margin-bottom: 8px;
64
67
  }
65
- .progress-radial:not(.stack > .progress-radial):not(:last-child) {
68
+ .progress-radial:not(.flex-box > .progress-radial):not(:last-child) {
66
69
  margin-bottom: 8px;
67
70
  }
68
- .radios:not(.stack > .radios):not(:last-child) {
71
+ .radios:not(.flex-box > .radios):not(:last-child) {
69
72
  margin-bottom: 12px;
70
73
  }
71
- :not(.radios) >.radios:not(.stack > :not(.radios) >.radios):not(:last-child) {
74
+ :not(.radios) >.radios:not(.flex-box > .radios):not(:last-child) {
72
75
  margin-bottom: 12px;
73
76
  }
74
- .checkbox:not(.stack > .checkbox):not(:last-child) {
77
+ .checkbox:not(.flex-box > .checkbox):not(:last-child) {
75
78
  margin-bottom: 12px;
76
79
  }
77
- .switch:not(.stack > .switch):not(:last-child) {
80
+ .switch:not(.flex-box > .switch):not(:last-child) {
78
81
  margin-bottom: 12px;
79
82
  }
80
- .radio-tiles:not(.stack > .radio-tiles):not(:last-child) {
83
+ .radio-tiles:not(.flex-box > .radio-tiles):not(:last-child) {
81
84
  margin-bottom: 16px;
82
85
  }
83
- :not(.radio-tiles) > .radio-tile:not(.stack > :not(.radio-tiles) > .radio-tile):not(:last-child) {
86
+ :not(.radio-tiles) > .radio-tile:not(.flex-box > .radio-tile):not(:last-child) {
84
87
  margin-bottom: 24px;
85
88
  }
86
- .checkbox-tiles:not(.stack > .checkbox-tiles):not(:last-child) {
89
+ .checkbox-tiles:not(.flex-box > .checkbox-tiles):not(:last-child) {
87
90
  margin-bottom: 24px;
88
91
  }
89
- :not(.checkbox-tiles) > .checkbox-tile:not(.stack > :not(.checkbox-tiles) > .checkbox-tile):not(:last-child) {
92
+ :not(.checkbox-tiles) > .checkbox-tile:not(.flex-box > .checkbox-tile):not(:last-child) {
90
93
  margin-bottom: 24px;
91
94
  }
92
- .field:not(.stack > .field):not(:last-child) {
95
+ .field:not(.flex-box > .field):not(:last-child) {
93
96
  margin-bottom: 24px;
94
97
  }
95
- .control:not(.stack > .control):not(:last-child) {
98
+ .control:not(.flex-box > .control):not(:last-child) {
96
99
  margin-bottom: 4px;
97
100
  }
98
- .help:not(.stack > .help):not(:last-child) {
101
+ .help:not(.flex-box > .help):not(:last-child) {
99
102
  margin-bottom: 4px;
100
103
  }
101
- .textarea:not(.stack > .textarea):not(:last-child) {
104
+ .textarea:not(.flex-box > .textarea):not(:last-child) {
102
105
  margin-bottom: 16px;
103
106
  }
104
- .select:not(.stack > .select):not(:last-child) {
107
+ .select:not(.flex-box > .select):not(:last-child) {
105
108
  margin-bottom: 16px;
106
109
  }
107
- .link:not(.stack > .link):not(:last-child) {
110
+ .link:not(.flex-box > .link):not(:last-child) {
108
111
  margin-bottom: 12px;
109
112
  }
110
- .sticker:not(.stack > .sticker):not(:last-child) {
113
+ .sticker:not(.flex-box > .sticker):not(:last-child) {
111
114
  margin-bottom: 8px;
112
115
  }
113
- .tags:not(.stack > .tags):not(:last-child) {
116
+ .tags:not(.flex-box > .tags):not(:last-child) {
114
117
  margin-bottom: 16px;
115
118
  }
116
- :not(.tags) > .tag:not(.stack > :not(.tags) > .tag):not(:last-child) {
119
+ :not(.tags) > .tag:not(.flex-box > .tag):not(:last-child) {
117
120
  margin-bottom: 8px;
118
121
  }
119
- .title.is-level-1:not(.stack > .title.is-level-1):not(:last-child) {
122
+ .title.is-level-1:not(.flex-box > .title.is-level-1):not(:last-child) {
120
123
  margin-bottom: 40px;
121
124
  }
122
- .title.is-level-2:not(.stack > .title.is-level-2):not(:last-child) {
125
+ .title.is-level-2:not(.flex-box > .title.is-level-2):not(:last-child) {
123
126
  margin-bottom: 40px;
124
127
  }
125
- .title.is-level-3:not(.stack > .title.is-level-3):not(:last-child) {
128
+ .title.is-level-3:not(.flex-box > .title.is-level-3):not(:last-child) {
126
129
  margin-bottom: 24px;
127
130
  }
128
- .title.is-level-4:not(.stack > .title.is-level-4):not(:last-child) {
131
+ .title.is-level-4:not(.flex-box > .title.is-level-4):not(:last-child) {
129
132
  margin-bottom: 24px;
130
133
  }
131
- .title.is-level-5:not(.stack > .title.is-level-5):not(:last-child) {
134
+ .title.is-level-5:not(.flex-box > .title.is-level-5):not(:last-child) {
132
135
  margin-bottom: 16px;
133
136
  }
134
- .title.is-level-6:not(.stack > .title.is-level-6):not(:last-child) {
137
+ .title.is-level-6:not(.flex-box > .title.is-level-6):not(:last-child) {
135
138
  margin-bottom: 8px;
136
139
  }
137
- .overline:not(.stack > .overline):not(:last-child) {
140
+ .overline:not(.flex-box > .overline):not(:last-child) {
138
141
  margin-bottom: 0px;
139
142
  }
140
- .title:has(+.subtitle):not(.stack > .title:has(+.subtitle)):not(:last-child) {
143
+ .title:has(+.subtitle):not(.flex-box > .title:has(+.subtitle)):not(:last-child) {
141
144
  margin-bottom: 8px;
142
145
  }
143
- .title.is-level-1 + .subtitle:not(.stack > .title.is-level-1 + .subtitle):not(:last-child) {
146
+ .title.is-level-1 + .subtitle:not(.flex-box > .title.is-level-1 + .subtitle):not(:last-child) {
144
147
  margin-bottom: 32px;
145
148
  }
146
- .title.is-level-2 + .subtitle:not(.stack > .title.is-level-2 + .subtitle):not(:last-child) {
149
+ .title.is-level-2 + .subtitle:not(.flex-box > .title.is-level-2 + .subtitle):not(:last-child) {
147
150
  margin-bottom: 24px;
148
151
  }
149
- .title.is-level-3 + .subtitle:not(.stack > .title.is-level-3 + .subtitle):not(:last-child) {
152
+ .title.is-level-3 + .subtitle:not(.flex-box > .title.is-level-3 + .subtitle):not(:last-child) {
150
153
  margin-bottom: 24px;
151
154
  }
152
- .title.is-level-4 + .subtitle:not(.stack > .title.is-level-4 + .subtitle):not(:last-child) {
155
+ .title.is-level-4 + .subtitle:not(.flex-box > .title.is-level-4 + .subtitle):not(:last-child) {
153
156
  margin-bottom: 12px;
154
157
  }
155
- .title.is-level-5 + .subtitle:not(.stack > .title.is-level-5 + .subtitle):not(:last-child) {
158
+ .title.is-level-5 + .subtitle:not(.flex-box > .title.is-level-5 + .subtitle):not(:last-child) {
156
159
  margin-bottom: 12px;
157
160
  }
158
- .title.is-level-6 + .subtitle:not(.stack > .title.is-level-6 + .subtitle):not(:last-child) {
161
+ .title.is-level-6 + .subtitle:not(.flex-box > .title.is-level-6 + .subtitle):not(:last-child) {
159
162
  margin-bottom: 12px;
160
163
  }
161
164
  }
162
165
 
163
166
  @include mobile() {
164
167
  body:not(.is-tight) {
165
- .accordion:not(.stack > .accordion):not(:last-child) {
168
+ .accordion:not(.flex-box > .accordion):not(:last-child) {
169
+ margin-bottom: 16px;
170
+ }
171
+ .buttons:not(.flex-box > .buttons):not(:last-child) {
166
172
  margin-bottom: 16px;
167
173
  }
168
- .buttons:not(.stack > .buttons):not(:last-child) {
174
+ .card:not(.flex-box > .card):not(:last-child) {
169
175
  margin-bottom: 16px;
170
176
  }
171
- .card:not(.stack > .card):not(:last-child) {
177
+ .columns:not(.flex-box > .columns):not(:last-child) {
172
178
  margin-bottom: 16px;
173
179
  }
174
- .columns:not(.stack > .columns):not(:last-child) {
180
+ .flex-box:not(.flex-box > .flex-box):not(:last-child) {
175
181
  margin-bottom: 16px;
176
182
  }
177
- .box:not(.stack > .box):not(:last-child) {
183
+ .box:not(.flex-box > .box):not(:last-child) {
178
184
  margin-bottom: 16px;
179
185
  }
180
- .table:not(.stack > .table):not(:last-child) {
186
+ .table:not(.flex-box > .table):not(:last-child) {
181
187
  margin-bottom: 16px;
182
188
  }
183
- .list:not(.stack > .list):not(:last-child) {
189
+ .list:not(.flex-box > .list):not(:last-child) {
184
190
  margin-bottom: 16px;
185
191
  }
186
- .timeline:not(.stack > .timeline):not(:last-child) {
192
+ .timeline:not(.flex-box > .timeline):not(:last-child) {
187
193
  margin-bottom: 16px;
188
194
  }
189
- .stepper:not(.stack > .stepper):not(:last-child) {
195
+ .stepper:not(.flex-box > .stepper):not(:last-child) {
190
196
  margin-bottom: 16px;
191
197
  }
192
- .pagination:not(.stack > .pagination):not(:last-child) {
198
+ .pagination:not(.flex-box > .pagination):not(:last-child) {
193
199
  margin-bottom: 16px;
194
200
  }
195
- .segmented-control:not(.stack > .segmented-control):not(:last-child) {
201
+ .segmented-control:not(.flex-box > .segmented-control):not(:last-child) {
196
202
  margin-bottom: 16px;
197
203
  }
198
- .tabs:not(.stack > .tabs):not(:last-child) {
204
+ .tabs:not(.flex-box > .tabs):not(:last-child) {
199
205
  margin-bottom: 16px;
200
206
  }
201
- .range:not(.stack > .range):not(:last-child) {
207
+ .range:not(.flex-box > .range):not(:last-child) {
202
208
  margin-bottom: 16px;
203
209
  }
204
- .stepper:not(.stack > .stepper):not(:last-child) {
210
+ .stepper:not(.flex-box > .stepper):not(:last-child) {
205
211
  margin-bottom: 16px;
206
212
  }
207
- .price-container:not(.stack > .price-container):not(:last-child) {
213
+ .price-container:not(.flex-box > .price-container):not(:last-child) {
208
214
  margin-bottom: 8px;
209
215
  }
210
- :not(.buttons) > .button:not(.stack > :not(.buttons) > .button):not(:last-child) {
216
+ :not(.buttons) > .button:not(.flex-box > .button):not(:last-child) {
211
217
  margin-bottom: 16px;
212
218
  }
213
- .countdown:not(.stack > .countdown):not(:last-child) {
219
+ .countdown:not(.flex-box > .countdown):not(:last-child) {
214
220
  margin-bottom: 12px;
215
221
  }
216
- .countdown.is-small:not(.stack > .countdown.is-small):not(:last-child) {
222
+ .countdown.is-small:not(.flex-box > .countdown.is-small):not(:last-child) {
217
223
  margin-bottom: 12px;
218
224
  }
219
- .chips-list:not(.stack > .chips-list):not(:last-child) {
225
+ .chips-list:not(.flex-box > .chips-list):not(:last-child) {
220
226
  margin-bottom: 12px;
221
227
  }
222
- p.text:not(.stack > p.text):not(:last-child) {
228
+ p.text:not(.flex-box > p.text):not(:last-child) {
223
229
  margin-bottom: 12px;
224
230
  }
225
- .progress:not(.stack > .progress):not(:last-child) {
231
+ .progress:not(.flex-box > .progress):not(:last-child) {
226
232
  margin-bottom: 8px;
227
233
  }
228
- .progress-radial:not(.stack > .progress-radial):not(:last-child) {
234
+ .progress-radial:not(.flex-box > .progress-radial):not(:last-child) {
229
235
  margin-bottom: 8px;
230
236
  }
231
- .radios:not(.stack > .radios):not(:last-child) {
237
+ .radios:not(.flex-box > .radios):not(:last-child) {
232
238
  margin-bottom: 12px;
233
239
  }
234
- :not(.radios) >.radios:not(.stack > :not(.radios) >.radios):not(:last-child) {
240
+ :not(.radios) >.radios:not(.flex-box > .radios):not(:last-child) {
235
241
  margin-bottom: 12px;
236
242
  }
237
- .checkbox:not(.stack > .checkbox):not(:last-child) {
243
+ .checkbox:not(.flex-box > .checkbox):not(:last-child) {
238
244
  margin-bottom: 12px;
239
245
  }
240
- .switch:not(.stack > .switch):not(:last-child) {
246
+ .switch:not(.flex-box > .switch):not(:last-child) {
241
247
  margin-bottom: 12px;
242
248
  }
243
- .radio-tiles:not(.stack > .radio-tiles):not(:last-child) {
249
+ .radio-tiles:not(.flex-box > .radio-tiles):not(:last-child) {
244
250
  margin-bottom: 12px;
245
251
  }
246
- :not(.radio-tiles) > .radio-tile:not(.stack > :not(.radio-tiles) > .radio-tile):not(:last-child) {
252
+ :not(.radio-tiles) > .radio-tile:not(.flex-box > .radio-tile):not(:last-child) {
247
253
  margin-bottom: 16px;
248
254
  }
249
- .checkbox-tiles:not(.stack > .checkbox-tiles):not(:last-child) {
255
+ .checkbox-tiles:not(.flex-box > .checkbox-tiles):not(:last-child) {
250
256
  margin-bottom: 16px;
251
257
  }
252
- :not(.checkbox-tiles) > .checkbox-tile:not(.stack > :not(.checkbox-tiles) > .checkbox-tile):not(:last-child) {
258
+ :not(.checkbox-tiles) > .checkbox-tile:not(.flex-box > .checkbox-tile):not(:last-child) {
253
259
  margin-bottom: 16px;
254
260
  }
255
- .field:not(.stack > .field):not(:last-child) {
261
+ .field:not(.flex-box > .field):not(:last-child) {
256
262
  margin-bottom: 16px;
257
263
  }
258
- .control:not(.stack > .control):not(:last-child) {
264
+ .control:not(.flex-box > .control):not(:last-child) {
259
265
  margin-bottom: 4px;
260
266
  }
261
- .help:not(.stack > .help):not(:last-child) {
267
+ .help:not(.flex-box > .help):not(:last-child) {
262
268
  margin-bottom: 4px;
263
269
  }
264
- .textarea:not(.stack > .textarea):not(:last-child) {
270
+ .textarea:not(.flex-box > .textarea):not(:last-child) {
265
271
  margin-bottom: 16px;
266
272
  }
267
- .select:not(.stack > .select):not(:last-child) {
273
+ .select:not(.flex-box > .select):not(:last-child) {
268
274
  margin-bottom: 16px;
269
275
  }
270
- .link:not(.stack > .link):not(:last-child) {
276
+ .link:not(.flex-box > .link):not(:last-child) {
271
277
  margin-bottom: 8px;
272
278
  }
273
- .sticker:not(.stack > .sticker):not(:last-child) {
279
+ .sticker:not(.flex-box > .sticker):not(:last-child) {
274
280
  margin-bottom: 8px;
275
281
  }
276
- .tags:not(.stack > .tags):not(:last-child) {
282
+ .tags:not(.flex-box > .tags):not(:last-child) {
277
283
  margin-bottom: 16px;
278
284
  }
279
- :not(.tags) > .tag:not(.stack > :not(.tags) > .tag):not(:last-child) {
285
+ :not(.tags) > .tag:not(.flex-box > .tag):not(:last-child) {
280
286
  margin-bottom: 8px;
281
287
  }
282
- .title.is-level-1:not(.stack > .title.is-level-1):not(:last-child) {
288
+ .title.is-level-1:not(.flex-box > .title.is-level-1):not(:last-child) {
283
289
  margin-bottom: 32px;
284
290
  }
285
- .title.is-level-2:not(.stack > .title.is-level-2):not(:last-child) {
291
+ .title.is-level-2:not(.flex-box > .title.is-level-2):not(:last-child) {
286
292
  margin-bottom: 32px;
287
293
  }
288
- .title.is-level-3:not(.stack > .title.is-level-3):not(:last-child) {
294
+ .title.is-level-3:not(.flex-box > .title.is-level-3):not(:last-child) {
289
295
  margin-bottom: 24px;
290
296
  }
291
- .title.is-level-4:not(.stack > .title.is-level-4):not(:last-child) {
297
+ .title.is-level-4:not(.flex-box > .title.is-level-4):not(:last-child) {
292
298
  margin-bottom: 16px;
293
299
  }
294
- .title.is-level-5:not(.stack > .title.is-level-5):not(:last-child) {
300
+ .title.is-level-5:not(.flex-box > .title.is-level-5):not(:last-child) {
295
301
  margin-bottom: 12px;
296
302
  }
297
- .title.is-level-6:not(.stack > .title.is-level-6):not(:last-child) {
303
+ .title.is-level-6:not(.flex-box > .title.is-level-6):not(:last-child) {
298
304
  margin-bottom: 12px;
299
305
  }
300
- .overline:not(.stack > .overline):not(:last-child) {
306
+ .overline:not(.flex-box > .overline):not(:last-child) {
301
307
  margin-bottom: 0px;
302
308
  }
303
- .title:has(+.subtitle):not(.stack > .title:has(+.subtitle)):not(:last-child) {
309
+ .title:has(+.subtitle):not(.flex-box > .title:has(+.subtitle)):not(:last-child) {
304
310
  margin-bottom: 8px;
305
311
  }
306
- .title.is-level-1 + .subtitle:not(.stack > .title.is-level-1 + .subtitle):not(:last-child) {
312
+ .title.is-level-1 + .subtitle:not(.flex-box > .title.is-level-1 + .subtitle):not(:last-child) {
307
313
  margin-bottom: 40px;
308
314
  }
309
- .title.is-level-2 + .subtitle:not(.stack > .title.is-level-2 + .subtitle):not(:last-child) {
315
+ .title.is-level-2 + .subtitle:not(.flex-box > .title.is-level-2 + .subtitle):not(:last-child) {
310
316
  margin-bottom: 32px;
311
317
  }
312
- .title.is-level-3 + .subtitle:not(.stack > .title.is-level-3 + .subtitle):not(:last-child) {
318
+ .title.is-level-3 + .subtitle:not(.flex-box > .title.is-level-3 + .subtitle):not(:last-child) {
313
319
  margin-bottom: 32px;
314
320
  }
315
- .title.is-level-4 + .subtitle:not(.stack > .title.is-level-4 + .subtitle):not(:last-child) {
321
+ .title.is-level-4 + .subtitle:not(.flex-box > .title.is-level-4 + .subtitle):not(:last-child) {
316
322
  margin-bottom: 8px;
317
323
  }
318
- .title.is-level-5 + .subtitle:not(.stack > .title.is-level-5 + .subtitle):not(:last-child) {
324
+ .title.is-level-5 + .subtitle:not(.flex-box > .title.is-level-5 + .subtitle):not(:last-child) {
319
325
  margin-bottom: 8px;
320
326
  }
321
- .title.is-level-6 + .subtitle:not(.stack > .title.is-level-6 + .subtitle):not(:last-child) {
327
+ .title.is-level-6 + .subtitle:not(.flex-box > .title.is-level-6 + .subtitle):not(:last-child) {
322
328
  margin-bottom: 8px;
323
329
  }
324
330
 
package/framework/src/components/_button.scss CHANGED
@@ -71,6 +71,9 @@ $button-border-width: 2px !default;
71
71
 
72
72
  &.is-loading {
73
73
  background-color: getColor('neutral');
74
+ &::after {
75
+ @include spinner('neutral-fade');
76
+ }
74
77
  }
75
78
 
76
79
  }