@trilogy-ds/styles 0.0.1-beta-83 → 0.0.1-beta-86

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 (8) 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 +84 -96
  5. package/framework/src/components/_modal.scss +6 -2
  6. package/framework/src/utilities/_a11y.scss +13 -0
  7. package/framework/src/utilities/_all.scss +1 -0
  8. package/package.json +1 -1
package/framework/src/components/_autolayout.scss CHANGED
@@ -1,270 +1,258 @@
1
1
  body:not(.is-tight) {
2
- * + .accordions {
2
+ .accordions {
3
3
  margin-bottom: 24px;
4
4
  }
5
- * + .card {
5
+ .card {
6
6
  margin-bottom: 24px;
7
7
  }
8
- * + .alert {
8
+ .box {
9
9
  margin-bottom: 24px;
10
10
  }
11
- * + .box {
11
+ .table {
12
12
  margin-bottom: 24px;
13
13
  }
14
- * + .table {
14
+ .list {
15
15
  margin-bottom: 24px;
16
16
  }
17
- * + .list {
17
+ .timeline {
18
18
  margin-bottom: 24px;
19
19
  }
20
- * + .timeline {
20
+ .stepper {
21
21
  margin-bottom: 24px;
22
22
  }
23
- * + .stepper {
23
+ .pagination {
24
24
  margin-bottom: 24px;
25
25
  }
26
- * + .pagination {
26
+ .segmented-control {
27
27
  margin-bottom: 24px;
28
28
  }
29
- * + .segmented-control {
29
+ .tabs {
30
30
  margin-bottom: 24px;
31
31
  }
32
- * + .tabs {
32
+ .range {
33
33
  margin-bottom: 24px;
34
34
  }
35
- * + .range {
35
+ .stepper {
36
36
  margin-bottom: 24px;
37
37
  }
38
- * + .divider {
39
- margin-bottom: 16px;
40
- }
41
- * + .stepper {
42
- margin-bottom: 24px;
43
- }
44
- * + .price {
38
+ .price-container {
45
39
  margin-bottom: 12px;
46
40
  }
47
- * + .button {
41
+ .buttons {
48
42
  margin-bottom: 24px;
49
43
  }
50
- * + .countdown {
44
+ .countdown {
51
45
  margin-bottom: 16px;
52
46
  }
53
- * + .countdown.is-small {
47
+ .countdown.is-small {
54
48
  margin-bottom: 12px;
55
49
  }
56
- * + .chips {
50
+ .chips-list {
57
51
  margin-bottom: 12px;
58
52
  }
59
- * + .text {
53
+ p.text {
60
54
  margin-bottom: 12px;
61
55
  }
62
- * + .progress {
56
+ .progress {
63
57
  margin-bottom: 8px;
64
58
  }
65
- * + .progress-radial {
59
+ .progress-radial {
66
60
  margin-bottom: 8px;
67
61
  }
68
- * + .radio {
62
+ .radio {
69
63
  margin-bottom: 12px;
70
64
  }
71
- * + .checkbox {
65
+ .checkbox {
72
66
  margin-bottom: 12px;
73
67
  }
74
- * + .switch {
68
+ .switch {
75
69
  margin-bottom: 12px;
76
70
  }
77
- * + .radio-tile {
71
+ .radio-tile {
78
72
  margin-bottom: 24px;
79
73
  }
80
- * + .checkbox-tile {
74
+ .checkbox-tile {
81
75
  margin-bottom: 24px;
82
76
  }
83
- * + .input {
77
+ .input {
84
78
  margin-bottom: 16px;
85
79
  }
86
- * + .textarea {
80
+ .textarea {
87
81
  margin-bottom: 16px;
88
82
  }
89
- * + .select {
83
+ .select {
90
84
  margin-bottom: 16px;
91
85
  }
92
- * + .link {
86
+ .link {
93
87
  margin-bottom: 12px;
94
88
  }
95
- * + .sticker {
89
+ .sticker {
96
90
  margin-bottom: 8px;
97
91
  }
98
- * + .tag {
92
+ .tag {
99
93
  margin-bottom: 8px;
100
94
  }
101
- * + .title.is-level-1 {
95
+ .title.is-level-1 {
102
96
  margin-bottom: 40px;
103
97
  }
104
- * + .title.is-level-2 {
98
+ .title.is-level-2 {
105
99
  margin-bottom: 32px;
106
100
  }
107
- * + .title.is-level-3 {
101
+ .title.is-level-3 {
108
102
  margin-bottom: 16px;
109
103
  }
110
- * + .title.is-level-4 {
104
+ .title.is-level-4 {
111
105
  margin-bottom: 12px;
112
106
  }
113
- * + .title.is-level-5 {
107
+ .title.is-level-5 {
114
108
  margin-bottom: 12px;
115
109
  }
116
- * + .title.is-level-6 {
110
+ .title.is-level-6 {
117
111
  margin-bottom: 12px;
118
112
  }
119
- * + .overline {
113
+ .overline {
120
114
  margin-bottom: 0px;
121
115
  }
122
- .subtitle + .title.is-level-1 {
116
+ .title.is-level-1 + .subtitle {
123
117
  margin-bottom: 8px;
124
118
  }
125
- .subtitle + .title.is-level-2 {
119
+ .title.is-level-2 + .subtitle {
126
120
  margin-bottom: 8px;
127
121
  }
128
- .title.is-level-1 + .subtitle {
122
+ .subtitle + .title.is-level-1 {
129
123
  margin-bottom: 32px;
130
124
  }
131
- .title.is-level-2 + .subtitle {
125
+ .subtitle + .title.is-level-2 {
132
126
  margin-bottom: 24px;
133
127
  }
134
128
  }
135
129
 
136
130
  @include mobile() {
137
131
  body:not(.is-tight) {
138
- * + .accordions {
132
+ .accordions {
139
133
  margin-bottom: 16px;
140
134
  }
141
- * + .card {
135
+ .card {
142
136
  margin-bottom: 16px;
143
137
  }
144
- * + .alert {
138
+ .box {
145
139
  margin-bottom: 16px;
146
140
  }
147
- * + .box {
141
+ .table {
148
142
  margin-bottom: 16px;
149
143
  }
150
- * + .table {
144
+ .list {
151
145
  margin-bottom: 16px;
152
146
  }
153
- * + .list {
147
+ .timeline {
154
148
  margin-bottom: 16px;
155
149
  }
156
- * + .timeline {
150
+ .stepper {
157
151
  margin-bottom: 16px;
158
152
  }
159
- * + .stepper {
153
+ .pagination {
160
154
  margin-bottom: 16px;
161
155
  }
162
- * + .pagination {
156
+ .segmented-control {
163
157
  margin-bottom: 16px;
164
158
  }
165
- * + .segmented-control {
159
+ .tabs {
166
160
  margin-bottom: 16px;
167
161
  }
168
- * + .tabs {
162
+ .range {
169
163
  margin-bottom: 16px;
170
164
  }
171
- * + .range {
165
+ .stepper {
172
166
  margin-bottom: 16px;
173
167
  }
174
- * + .divider {
175
- margin-bottom: 16px;
176
- }
177
- * + .stepper {
178
- margin-bottom: 16px;
179
- }
180
- * + .price {
168
+ .price-container {
181
169
  margin-bottom: 8px;
182
170
  }
183
- * + .button {
171
+ .buttons {
184
172
  margin-bottom: 16px;
185
173
  }
186
- * + .countdown {
174
+ .countdown {
187
175
  margin-bottom: 12px;
188
176
  }
189
- * + .countdown.is-small {
177
+ .countdown.is-small {
190
178
  margin-bottom: 12px;
191
179
  }
192
- * + .chips {
180
+ .chips-list {
193
181
  margin-bottom: 12px;
194
182
  }
195
- * + .text {
183
+ p.text {
196
184
  margin-bottom: 8px;
197
185
  }
198
- * + .progress {
186
+ .progress {
199
187
  margin-bottom: 8px;
200
188
  }
201
- * + .progress-radial {
189
+ .progress-radial {
202
190
  margin-bottom: 8px;
203
191
  }
204
- * + .radio {
192
+ .radio {
205
193
  margin-bottom: 12px;
206
194
  }
207
- * + .checkbox {
195
+ .checkbox {
208
196
  margin-bottom: 12px;
209
197
  }
210
- * + .switch {
198
+ .switch {
211
199
  margin-bottom: 12px;
212
200
  }
213
- * + .radio-tile {
201
+ .radio-tile {
214
202
  margin-bottom: 16px;
215
203
  }
216
- * + .checkbox-tile {
204
+ .checkbox-tile {
217
205
  margin-bottom: 16px;
218
206
  }
219
- * + .input {
207
+ .input {
220
208
  margin-bottom: 16px;
221
209
  }
222
- * + .textarea {
210
+ .textarea {
223
211
  margin-bottom: 16px;
224
212
  }
225
- * + .select {
213
+ .select {
226
214
  margin-bottom: 16px;
227
215
  }
228
- * + .link {
216
+ .link {
229
217
  margin-bottom: 8px;
230
218
  }
231
- * + .sticker {
219
+ .sticker {
232
220
  margin-bottom: 8px;
233
221
  }
234
- * + .tag {
222
+ .tag {
235
223
  margin-bottom: 8px;
236
224
  }
237
- * + .title.is-level-1 {
225
+ .title.is-level-1 {
238
226
  margin-bottom: 32px;
239
227
  }
240
- * + .title.is-level-2 {
228
+ .title.is-level-2 {
241
229
  margin-bottom: 24px;
242
230
  }
243
- * + .title.is-level-3 {
231
+ .title.is-level-3 {
244
232
  margin-bottom: 12px;
245
233
  }
246
- * + .title.is-level-4 {
234
+ .title.is-level-4 {
247
235
  margin-bottom: 8px;
248
236
  }
249
- * + .title.is-level-5 {
237
+ .title.is-level-5 {
250
238
  margin-bottom: 8px;
251
239
  }
252
- * + .title.is-level-6 {
240
+ .title.is-level-6 {
253
241
  margin-bottom: 8px;
254
242
  }
255
- * + .overline {
243
+ .overline {
256
244
  margin-bottom: 0px;
257
245
  }
258
- .subtitle + .title.is-level-1 {
246
+ .title.is-level-1 + .subtitle {
259
247
  margin-bottom: 8px;
260
248
  }
261
- .subtitle + .title.is-level-2 {
249
+ .title.is-level-2 + .subtitle {
262
250
  margin-bottom: 8px;
263
251
  }
264
- .title.is-level-1 + .subtitle {
252
+ .subtitle + .title.is-level-1 {
265
253
  margin-bottom: 40px;
266
254
  }
267
- .title.is-level-2 + .subtitle {
255
+ .subtitle + .title.is-level-2 {
268
256
  margin-bottom: 32px;
269
257
  }
270
258
 
package/framework/src/components/_modal.scss CHANGED
@@ -145,6 +145,11 @@ body:has(.modal.is-active) {
145
145
  }
146
146
 
147
147
  .modal-title {
148
+ padding: 20px 0;
149
+ }
150
+
151
+ .modal-title,
152
+ .modal-header {
148
153
  color: getColor('font');
149
154
  font-family: $family-sans-serif;
150
155
  font-size: $size-3;
@@ -154,7 +159,6 @@ body:has(.modal.is-active) {
154
159
  z-index: zindex('small');
155
160
  position: sticky;
156
161
  top: 0;
157
- padding: 20px 0;
158
162
  width: 100%;
159
163
  word-wrap: break-word;
160
164
 
@@ -199,4 +203,4 @@ body:has(.modal.is-active) {
199
203
  }
200
204
  }
201
205
  }
202
- }
206
+ }
package/framework/src/utilities/_a11y.scss ADDED
@@ -0,0 +1,13 @@
1
+ .sr-only {
2
+ position: absolute;
3
+ width: 1px;
4
+ height: 1px;
5
+ margin: -1px;
6
+ padding: 0;
7
+ border: 0;
8
+ overflow: hidden;
9
+ clip: rect(0, 0, 0, 0);
10
+ white-space: nowrap;
11
+ top: 0;
12
+ left: 0;
13
+ }
package/framework/src/utilities/_all.scss CHANGED
@@ -10,3 +10,4 @@
10
10
  @import "background";
11
11
  @import "animations";
12
12
  @import "spacing";
13
+ @import "a11y";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trilogy-ds/styles",
3
- "version": "0.0.1-beta-83",
3
+ "version": "0.0.1-beta-86",
4
4
  "author": "Bouygues Telecom",
5
5
  "license": "UNLICENSED",
6
6
  "files": [