@trilogy-ds/styles 0.0.1-beta.29 → 0.0.1-beta.31

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 (21) 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/_accordion.scss +4 -8
  5. package/framework/src/components/_popover.scss +257 -254
  6. package/framework/src/components/_price.scss +39 -0
  7. package/framework/src/components/_segmented-control.scss +0 -2
  8. package/framework/src/components/_tabs.scss +0 -4
  9. package/framework/src/elements/_all.scss +0 -1
  10. package/framework/src/elements/_button.scss +10 -1
  11. package/framework/src/elements/_chips.scss +0 -2
  12. package/framework/src/elements/_entry.scss +0 -1
  13. package/framework/src/elements/_list.scss +45 -17
  14. package/framework/src/elements/_select.scss +1 -2
  15. package/framework/src/elements/_table.scss +177 -169
  16. package/framework/src/elements/_textarea.scss +5 -1
  17. package/framework/src/theming/buttons_partial.scss +1 -1
  18. package/framework/src/utilities/_derived-variables.scss +1 -1
  19. package/framework/src/utilities/_mixins.scss +16 -11
  20. package/package.json +1 -1
  21. package/framework/src/elements/_notification.scss +0 -150
package/framework/src/components/_accordion.scss CHANGED
@@ -21,6 +21,10 @@
21
21
  min-height: 56px;
22
22
  max-height: max-content;
23
23
 
24
+ .accordion-header {
25
+ font-weight: bold;
26
+ }
27
+
24
28
  .accordion-body {
25
29
  padding: $spacing-4;
26
30
  padding-top: 0 !important;
@@ -30,10 +34,6 @@
30
34
  @include hoverRules();
31
35
  }
32
36
 
33
- &:focus:not(.is-disabled), &:focus-visible:not(.is-disabled) {
34
- border: 1px solid currentColor;
35
- }
36
-
37
37
  &:focus-visible {
38
38
  outline: var(--border-active);
39
39
  outline-offset: 2px;
@@ -54,10 +54,6 @@
54
54
  @include arrow();
55
55
  }
56
56
 
57
- &[open]:not([aria-disabled="true"]) > .accordion-header:first-child {
58
- font-weight: bold;
59
- }
60
-
61
57
  &[aria-disabled="true"] .accordion-body {
62
58
  display: none !important;
63
59
  }
package/framework/src/components/_popover.scss CHANGED
@@ -1,337 +1,340 @@
1
1
  @mixin position-top {
2
- top: auto;
3
- bottom: 100%;
4
- left: 50%;
5
- right: auto;
6
- transform: translate(-50%, 2.5px);
7
- margin-bottom: 8px;
2
+ top: auto;
3
+ bottom: 100%;
4
+ left: 50%;
5
+ right: auto;
6
+ transform: translate(-50%, 2.5px);
8
7
 
9
- &::before {
10
- bottom: auto;
11
- right: auto;
12
- top: 100%;
13
- left: 50%;
14
- transform: rotate(-45deg);
15
- }
8
+ &::before {
9
+ bottom: auto;
10
+ right: auto;
11
+ top: 100%;
12
+ left: 50%;
13
+ transform: rotate(-45deg);
14
+ }
16
15
  }
17
16
 
18
17
  @mixin position-right {
19
- top: auto;
20
- bottom: 50%;
21
- left: 100%;
18
+ top: auto;
19
+ bottom: 50%;
20
+ left: 100%;
21
+ right: auto;
22
+ transform: translate(7px, 50%);
23
+
24
+ // flèche sur le contour de la popover
25
+ &::before {
26
+ top: 50%;
27
+ bottom: auto;
28
+ left: 0;
22
29
  right: auto;
23
- transform: translate(7px, 50%);
24
-
25
- // flèche sur le contour de la popover
26
- &::before {
27
- top: 50%;
28
- bottom: auto;
29
- left: 0;
30
- right: auto;
31
- transform: rotate(45deg);
32
- }
30
+ transform: rotate(45deg);
31
+ }
33
32
  }
34
33
 
35
34
  @mixin position-bottom {
36
- top: 100%;
35
+ top: 100%;
36
+ bottom: auto;
37
+ left: 50%;
38
+ right: auto;
39
+ transform: translate(-50%, 7px);
40
+
41
+ // flèche sur le contour de la popover
42
+ &::before {
43
+ top: 0;
37
44
  bottom: auto;
38
- left: 50%;
39
45
  right: auto;
40
- transform: translate(-50%, 7px);
41
-
42
- // flèche sur le contour de la popover
43
- &::before {
44
- top: 0;
45
- bottom: auto;
46
- right: auto;
47
- left: 50%;
48
- transform: rotate(135deg);
49
- }
46
+ left: 50%;
47
+ transform: rotate(135deg);
48
+ }
50
49
  }
51
50
 
52
51
  @mixin position-left {
53
- top: auto;
54
- bottom: 50%;
55
- left: auto;
56
- right: 100%;
57
- transform: translate(-7px, 50%);
58
-
59
- // flèche sur le contour de la popover
60
- &::before {
61
- top: 50%;
62
- bottom: auto;
63
- left: 100%;
64
- right: auto;
65
- transform: rotate(-135deg);
66
- }
52
+ top: auto;
53
+ bottom: 50%;
54
+ left: auto;
55
+ right: 100%;
56
+ transform: translate(-7px, 50%);
57
+
58
+ // flèche sur le contour de la popover
59
+ &::before {
60
+ top: 50%;
61
+ bottom: auto;
62
+ left: 100%;
63
+ right: auto;
64
+ transform: rotate(-135deg);
65
+ }
67
66
  }
68
67
 
69
68
  .popover {
70
- position: relative;
71
- display: inline-flex;
72
-
73
- .popover-content {
74
- @include position-top();
75
-
76
- background-color: getColor('font');
77
- border-radius: var(--radius-small);
78
- box-shadow: $shadow;
79
- color: getColor('background');
80
- display: inline-block;
81
- font-size: 12px;
82
- visibility: hidden;
83
- padding: $spacing-2;
84
- font-weight: 500;
85
- position: absolute;
86
- text-align: center;
87
- max-width: 210px;
88
- width: max-content;
89
- z-index: zindex('popover');
90
-
91
- ul {
92
- padding-left: 14px;
93
- }
94
-
95
- // dessine la flèche sur le contour de la popover
96
- &::before {
97
- content: '';
98
- border-color: transparent;
99
- border-bottom-color: getColor('font');
100
- border-left-color: getColor('font');
101
- border-style: solid;
102
- border-width: 4px;
103
- pointer-events: none;
104
- position: absolute;
105
- margin-left: -4px;
106
- margin-top: -4px;
107
- transform-origin: center;
108
- height: 0;
109
- width: 0;
110
- }
111
-
112
- .title,
113
- .suptitle,
114
- .paragraph,
115
- .text,
116
- p {
117
- color: getColor('background');
118
- }
119
- }
120
-
121
- &.is-popover-right .popover-content {
122
- @include position-right();
69
+ position: relative;
70
+ display: inline-flex;
71
+
72
+ .popover-content {
73
+ @include position-top();
74
+
75
+ background-color: getColor('font');
76
+ border-radius: var(--radius-small);
77
+ box-shadow: $shadow;
78
+ color: getColor('background');
79
+ display: inline-block;
80
+ font-size: 12px;
81
+ visibility: hidden;
82
+ padding: $spacing-2;
83
+ font-weight: 500;
84
+ position: absolute;
85
+ text-align: center;
86
+ max-width: 210px;
87
+ width: max-content;
88
+ z-index: zindex('popover');
89
+
90
+ ul {
91
+ padding-left: 14px;
123
92
  }
124
93
 
125
- &.is-popover-bottom .popover-content {
126
- @include position-bottom();
94
+ // dessine la flèche sur le contour de la popover
95
+ &::before {
96
+ content: '';
97
+ border-color: transparent;
98
+ border-bottom-color: getColor('font');
99
+ border-left-color: getColor('font');
100
+ border-style: solid;
101
+ border-width: 4px;
102
+ pointer-events: none;
103
+ position: absolute;
104
+ margin-left: -4px;
105
+ margin-top: -4px;
106
+ transform-origin: center;
107
+ height: 0;
108
+ width: 0;
127
109
  }
128
110
 
129
- &.is-popover-left .popover-content {
130
- @include position-left();
111
+ .title,
112
+ .suptitle,
113
+ .paragraph,
114
+ .text,
115
+ p {
116
+ color: getColor('background');
131
117
  }
118
+ }
132
119
 
133
- @include mobile {
134
- &.is-popover-top-mobile .popover-content {
135
- @include position-top();
136
- }
137
-
138
- &.is-popover-right-mobile .popover-content {
139
- @include position-right();
140
- }
120
+ &:not(.is-popover-right):not(.is-popover-left):not(.is-popover-bottom) .popover-content {
121
+ margin-bottom: 8px;
122
+ }
141
123
 
142
- &.is-popover-bottom-mobile .popover-content {
143
- @include position-bottom();
144
- }
124
+ &.is-popover-right .popover-content {
125
+ @include position-right();
126
+ }
145
127
 
146
- &.is-popover-left-mobile .popover-content {
147
- @include position-left();
148
- }
149
- }
128
+ &.is-popover-bottom .popover-content {
129
+ @include position-bottom();
130
+ }
150
131
 
151
- @include tablet {
152
- &.is-popover-top-tablet .popover-content {
153
- @include position-top();
154
- }
132
+ &.is-popover-left .popover-content {
133
+ @include position-left();
134
+ }
155
135
 
156
- &.is-popover-right-tablet .popover-content {
157
- @include position-right();
158
- }
136
+ @include mobile {
137
+ &.is-popover-top-mobile .popover-content {
138
+ @include position-top();
139
+ }
159
140
 
160
- &.is-popover-bottom-tablet .popover-content {
161
- @include position-bottom();
162
- }
141
+ &.is-popover-right-mobile .popover-content {
142
+ @include position-right();
143
+ }
163
144
 
164
- &.is-popover-left-tablet .popover-content {
165
- @include position-left();
166
- }
145
+ &.is-popover-bottom-mobile .popover-content {
146
+ @include position-bottom();
167
147
  }
168
148
 
169
- @include tablet-only {
170
- &.is-popover-top-tablet-only .popover-content {
171
- @include position-top();
172
- }
149
+ &.is-popover-left-mobile .popover-content {
150
+ @include position-left();
151
+ }
152
+ }
173
153
 
174
- &.is-popover-right-tablet-only .popover-content {
175
- @include position-right();
176
- }
154
+ @include tablet {
155
+ &.is-popover-top-tablet .popover-content {
156
+ @include position-top();
157
+ }
177
158
 
178
- &.is-popover-bottom-tablet-only .popover-content {
179
- @include position-bottom();
180
- }
159
+ &.is-popover-right-tablet .popover-content {
160
+ @include position-right();
161
+ }
181
162
 
182
- &.is-popover-left-tablet-only .popover-content {
183
- @include position-left();
184
- }
163
+ &.is-popover-bottom-tablet .popover-content {
164
+ @include position-bottom();
185
165
  }
186
166
 
187
- @include touch {
188
- &.is-popover-top-touch .popover-content {
189
- @include position-top();
190
- }
167
+ &.is-popover-left-tablet .popover-content {
168
+ @include position-left();
169
+ }
170
+ }
191
171
 
192
- &.is-popover-right-touch .popover-content {
193
- @include position-right();
194
- }
172
+ @include tablet-only {
173
+ &.is-popover-top-tablet-only .popover-content {
174
+ @include position-top();
175
+ }
195
176
 
196
- &.is-popover-bottom-touch .popover-content {
197
- @include position-bottom();
198
- }
177
+ &.is-popover-right-tablet-only .popover-content {
178
+ @include position-right();
179
+ }
199
180
 
200
- &.is-popover-left-touch .popover-content {
201
- @include position-left();
202
- }
181
+ &.is-popover-bottom-tablet-only .popover-content {
182
+ @include position-bottom();
203
183
  }
204
184
 
205
- @include desktop {
206
- &.is-popover-top-desktop .popover-content {
207
- @include position-top();
208
- }
185
+ &.is-popover-left-tablet-only .popover-content {
186
+ @include position-left();
187
+ }
188
+ }
209
189
 
210
- &.is-popover-right-desktop .popover-content {
211
- @include position-right();
212
- }
190
+ @include touch {
191
+ &.is-popover-top-touch .popover-content {
192
+ @include position-top();
193
+ }
213
194
 
214
- &.is-popover-bottom-desktop .popover-content {
215
- @include position-bottom();
216
- }
195
+ &.is-popover-right-touch .popover-content {
196
+ @include position-right();
197
+ }
217
198
 
218
- &.is-popover-left-desktop .popover-content {
219
- @include position-left();
220
- }
199
+ &.is-popover-bottom-touch .popover-content {
200
+ @include position-bottom();
221
201
  }
222
202
 
223
- @include desktop-only {
224
- &.is-popover-top-desktop-only .popover-content {
225
- @include position-top();
226
- }
203
+ &.is-popover-left-touch .popover-content {
204
+ @include position-left();
205
+ }
206
+ }
227
207
 
228
- &.is-popover-right-desktop-only .popover-content {
229
- @include position-right();
230
- }
208
+ @include desktop {
209
+ &.is-popover-top-desktop .popover-content {
210
+ @include position-top();
211
+ }
231
212
 
232
- &.is-popover-bottom-desktop-only .popover-content {
233
- @include position-bottom();
234
- }
213
+ &.is-popover-right-desktop .popover-content {
214
+ @include position-right();
215
+ }
235
216
 
236
- &.is-popover-left-desktop-only .popover-content {
237
- @include position-left();
238
- }
217
+ &.is-popover-bottom-desktop .popover-content {
218
+ @include position-bottom();
239
219
  }
240
220
 
241
- @include widescreen {
242
- &.is-popover-top-widescreen .popover-content {
243
- @include position-top();
244
- }
221
+ &.is-popover-left-desktop .popover-content {
222
+ @include position-left();
223
+ }
224
+ }
225
+
226
+ @include desktop-only {
227
+ &.is-popover-top-desktop-only .popover-content {
228
+ @include position-top();
229
+ }
245
230
 
246
- &.is-popover-right-widescreen .popover-content {
247
- @include position-right();
248
- }
231
+ &.is-popover-right-desktop-only .popover-content {
232
+ @include position-right();
233
+ }
249
234
 
250
- &.is-popover-bottom-widescreen .popover-content {
251
- @include position-bottom();
252
- }
235
+ &.is-popover-bottom-desktop-only .popover-content {
236
+ @include position-bottom();
237
+ }
253
238
 
254
- &.is-popover-left-widescreen .popover-content {
255
- @include position-left();
256
- }
239
+ &.is-popover-left-desktop-only .popover-content {
240
+ @include position-left();
257
241
  }
242
+ }
258
243
 
259
- @include widescreen-only {
260
- &.is-popover-top-widescreen-only .popover-content {
261
- @include position-top();
262
- }
244
+ @include widescreen {
245
+ &.is-popover-top-widescreen .popover-content {
246
+ @include position-top();
247
+ }
263
248
 
264
- &.is-popover-right-widescreen-only .popover-content {
265
- @include position-right();
266
- }
249
+ &.is-popover-right-widescreen .popover-content {
250
+ @include position-right();
251
+ }
267
252
 
268
- &.is-popover-bottom-widescreen-only .popover-content {
269
- @include position-bottom();
270
- }
253
+ &.is-popover-bottom-widescreen .popover-content {
254
+ @include position-bottom();
255
+ }
271
256
 
272
- &.is-popover-left-widescreen-only .popover-content {
273
- @include position-left();
274
- }
257
+ &.is-popover-left-widescreen .popover-content {
258
+ @include position-left();
275
259
  }
260
+ }
276
261
 
277
- @include fullhd {
278
- &.is-popover-top-fullhd .popover-content {
279
- @include position-top();
280
- }
262
+ @include widescreen-only {
263
+ &.is-popover-top-widescreen-only .popover-content {
264
+ @include position-top();
265
+ }
281
266
 
282
- &.is-popover-right-fullhd .popover-content {
283
- @include position-right();
284
- }
267
+ &.is-popover-right-widescreen-only .popover-content {
268
+ @include position-right();
269
+ }
285
270
 
286
- &.is-popover-bottom-fullhd .popover-content {
287
- @include position-bottom();
288
- }
271
+ &.is-popover-bottom-widescreen-only .popover-content {
272
+ @include position-bottom();
273
+ }
289
274
 
290
- &.is-popover-left-fullhd .popover-content {
291
- @include position-left();
292
- }
275
+ &.is-popover-left-widescreen-only .popover-content {
276
+ @include position-left();
293
277
  }
278
+ }
294
279
 
295
- // ajustement des flèches en fonction de la position
296
- &.is-popover-right,
297
- &.is-popover-left {
298
- &.is-arrow-start .popover-content::before {
299
- top: 20%;
300
- }
280
+ @include fullhd {
281
+ &.is-popover-top-fullhd .popover-content {
282
+ @include position-top();
283
+ }
301
284
 
302
- &.is-arrow-end .popover-content::before {
303
- top: 80%;
304
- }
285
+ &.is-popover-right-fullhd .popover-content {
286
+ @include position-right();
305
287
  }
306
288
 
307
- &.is-popover-right {
308
- &.is-arrow-start .popover-content::before,
309
- &.is-arrow-end .popover-content::before {
310
- left: 0;
311
- }
289
+ &.is-popover-bottom-fullhd .popover-content {
290
+ @include position-bottom();
312
291
  }
313
292
 
314
- &.is-popover-left {
315
- &.is-arrow-start .popover-content::before,
316
- &.is-arrow-end .popover-content::before {
317
- left: 100%;
318
- }
293
+ &.is-popover-left-fullhd .popover-content {
294
+ @include position-left();
319
295
  }
296
+ }
320
297
 
298
+ // ajustement des flèches en fonction de la position
299
+ &.is-popover-right,
300
+ &.is-popover-left {
321
301
  &.is-arrow-start .popover-content::before {
322
- left: 10%;
302
+ top: 20%;
323
303
  }
324
304
 
325
305
  &.is-arrow-end .popover-content::before {
326
- left: 90%;
306
+ top: 80%;
327
307
  }
308
+ }
328
309
 
329
- &.is-popover-active .popover-content,
330
- &:hover .popover-content {
331
- visibility: visible;
310
+ &.is-popover-right {
311
+ &.is-arrow-start .popover-content::before,
312
+ &.is-arrow-end .popover-content::before {
313
+ left: 0;
332
314
  }
315
+ }
333
316
 
334
- .popover-trigger:focus ~ .popover-content {
335
- visibility: visible;
317
+ &.is-popover-left {
318
+ &.is-arrow-start .popover-content::before,
319
+ &.is-arrow-end .popover-content::before {
320
+ left: 100%;
336
321
  }
322
+ }
323
+
324
+ &.is-arrow-start .popover-content::before {
325
+ left: 10%;
326
+ }
327
+
328
+ &.is-arrow-end .popover-content::before {
329
+ left: 90%;
330
+ }
331
+
332
+ &.is-popover-active .popover-content,
333
+ &:hover .popover-content {
334
+ visibility: visible;
335
+ }
336
+
337
+ .popover-trigger:focus ~ .popover-content {
338
+ visibility: visible;
339
+ }
337
340
  }
package/framework/src/components/_price.scss CHANGED
@@ -30,6 +30,18 @@ $price-levels: (
30
30
  padding-left: 2px !important;
31
31
  }
32
32
  }
33
+ @if $i > 3 {
34
+ + .price-tag {
35
+ &::before {
36
+ border-width: 3px;
37
+ margin-left: -6px;
38
+ margin-top: 4px;
39
+ border-radius: 1px;
40
+ }
41
+ font-size: 10px;
42
+ padding: 4px !important;
43
+ }
44
+ }
33
45
  }
34
46
 
35
47
  // the details : cents + period
@@ -156,3 +168,30 @@ $price-levels: (
156
168
  }
157
169
  }
158
170
  }
171
+
172
+ .price-tag {
173
+ background-color: getColor('alternate');
174
+ margin-left: 10px;
175
+ border-radius: 6px;
176
+ display: inline-flex;
177
+ color: getColor('background');
178
+ height: fit-content;
179
+ padding: 8px;
180
+ &::before {
181
+ content: '';
182
+ border-color: transparent;
183
+ border-bottom-color: getColor('alternate');
184
+ border-left-color: getColor('alternate');
185
+ transform: rotate(45deg);
186
+ border-style: solid;
187
+ border-width: 5px;
188
+ border-radius: 2px;
189
+ pointer-events: none;
190
+ position: absolute;
191
+ margin-left: -12px;
192
+ margin-top: 6px;
193
+ transform-origin: center;
194
+ height: 0;
195
+ width: 0;
196
+ }
197
+ }