@trilogy-ds/styles 0.0.1-beta.5 → 0.0.1-beta.50

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