@trilogy-ds/styles 0.0.1-beta.9 → 0.0.3-beta-v4

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 (94) 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/_color.scss +9 -39
  5. package/framework/src/base/_generic.scss +4 -1
  6. package/framework/src/base/_helpers.scss +13 -38
  7. package/framework/src/base/_loading.scss +8 -1
  8. package/framework/src/base/_reset.scss +8 -3
  9. package/framework/src/components/_accordion.scss +53 -88
  10. package/framework/src/components/_all.scss +1 -7
  11. package/framework/src/components/_autolayout.scss +302 -0
  12. package/framework/src/components/_breadcrumb.scss +39 -34
  13. package/framework/src/components/_card.scss +8 -79
  14. package/framework/src/components/_countdown.scss +49 -47
  15. package/framework/src/components/_divider.scss +10 -15
  16. package/framework/src/components/_fab.scss +25 -38
  17. package/framework/src/components/_modal.scss +161 -158
  18. package/framework/src/components/_otp.scss +10 -29
  19. package/framework/src/components/_pagination.scss +59 -161
  20. package/framework/src/components/_plus-symbol.scss +1 -1
  21. package/framework/src/components/_popover.scss +260 -260
  22. package/framework/src/components/_price.scss +119 -170
  23. package/framework/src/components/_product-tour.scss +2 -4
  24. package/framework/src/components/_progress-radial.scss +24 -19
  25. package/framework/src/components/_range.scss +73 -72
  26. package/framework/src/components/_segmented-control.scss +51 -53
  27. package/framework/src/components/_stepper.scss +42 -222
  28. package/framework/src/components/_tabs.scss +46 -81
  29. package/framework/src/components/_timeline.scss +27 -112
  30. package/framework/src/elements/_alert.scss +13 -10
  31. package/framework/src/elements/_all.scss +1 -4
  32. package/framework/src/elements/_autocomplete.scss +32 -0
  33. package/framework/src/elements/_badge.scss +67 -61
  34. package/framework/src/elements/_box.scss +64 -161
  35. package/framework/src/elements/_button.scss +15 -141
  36. package/framework/src/elements/_checkbox.scss +29 -26
  37. package/framework/src/elements/_chips.scss +69 -85
  38. package/framework/src/elements/_container.scss +7 -39
  39. package/framework/src/elements/_entry.scss +76 -88
  40. package/framework/src/elements/_form.scss +26 -23
  41. package/framework/src/elements/_icon.scss +4 -4
  42. package/framework/src/elements/_image.scss +50 -40
  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 +45 -44
  47. package/framework/src/elements/_loader.scss +2 -2
  48. package/framework/src/elements/_other.scss +0 -37
  49. package/framework/src/elements/_paragraph.scss +35 -69
  50. package/framework/src/elements/_progress.scss +33 -22
  51. package/framework/src/elements/_radio.scss +45 -31
  52. package/framework/src/elements/_select.scss +85 -304
  53. package/framework/src/elements/_sticker.scss +12 -27
  54. package/framework/src/elements/_switch.scss +101 -99
  55. package/framework/src/elements/_table.scss +175 -228
  56. package/framework/src/elements/_tag.scss +104 -105
  57. package/framework/src/elements/_textarea.scss +113 -105
  58. package/framework/src/elements/_title.scss +89 -87
  59. package/framework/src/elements/_toaster.scss +4 -5
  60. package/framework/src/grid/_columns.scss +257 -764
  61. package/framework/src/grid/_rows.scss +45 -38
  62. package/framework/src/layout/_all.scss +0 -1
  63. package/framework/src/layout/_hero.scss +89 -215
  64. package/framework/src/layout/_section.scss +5 -29
  65. package/framework/src/theming/_all.scss +3 -0
  66. package/framework/src/theming/buttons_partial.scss +32 -0
  67. package/framework/src/theming/common_partials.scss +10 -0
  68. package/framework/src/theming/links_partial.scss +20 -0
  69. package/framework/src/utilities/_a11y.scss +13 -0
  70. package/framework/src/utilities/_all.scss +4 -0
  71. package/framework/src/utilities/_background.scss +19 -0
  72. package/framework/src/utilities/_colors.scss +40 -0
  73. package/framework/src/utilities/_controls.scss +38 -49
  74. package/framework/src/utilities/_derived-variables.scss +4 -15
  75. package/framework/src/utilities/_initial-variables.scss +4 -36
  76. package/framework/src/utilities/_mixins.scss +483 -592
  77. package/framework/src/utilities/_pre.scss +1 -0
  78. package/package.json +3 -3
  79. package/framework/src/components/_autolayout2.scss +0 -38
  80. package/framework/src/components/_disclaimer.scss +0 -84
  81. package/framework/src/components/_dropdown.scss +0 -128
  82. package/framework/src/components/_level.scss +0 -120
  83. package/framework/src/components/_media.scss +0 -64
  84. package/framework/src/components/_menu.scss +0 -213
  85. package/framework/src/components/_search-modal.scss +0 -197
  86. package/framework/src/components/_slices.scss +0 -316
  87. package/framework/src/components/_slider.scss +0 -92
  88. package/framework/src/components/_switch.scss +0 -209
  89. package/framework/src/elements/_checkradio.scss +0 -173
  90. package/framework/src/elements/_dot.scss +0 -6
  91. package/framework/src/elements/_notification.scss +0 -151
  92. package/framework/src/elements/_options.scss +0 -146
  93. package/framework/src/elements/_timeline.scss +0 -283
  94. 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-flex;
72
-
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();
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;
124
92
  }
125
-
126
- &.is-popover-bottom .popover-content {
127
- @include position-bottom();
93
+
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
-
130
- &.is-popover-left .popover-content {
131
- @include position-left();
110
+
111
+ .title,
112
+ .suptitle,
113
+ .paragraph,
114
+ .text,
115
+ p {
116
+ color: getColor('background');
132
117
  }
118
+ }
119
+
120
+ &:not(.is-popover-right):not(.is-popover-left):not(.is-popover-bottom) .popover-content {
121
+ margin-bottom: 8px;
122
+ }
133
123
 
134
- @include mobile {
135
- &.is-popover-top-mobile .popover-content {
136
- @include position-top();
137
- }
138
-
139
- &.is-popover-right-mobile .popover-content {
140
- @include position-right();
141
- }
142
-
143
- &.is-popover-bottom-mobile .popover-content {
144
- @include position-bottom();
145
- }
124
+ &.is-popover-right .popover-content {
125
+ @include position-right();
126
+ }
146
127
 
147
- &.is-popover-left-mobile .popover-content {
148
- @include position-left();
149
- }
150
- }
128
+ &.is-popover-bottom .popover-content {
129
+ @include position-bottom();
130
+ }
151
131
 
152
- @include tablet {
153
- &.is-popover-top-tablet .popover-content {
154
- @include position-top();
155
- }
132
+ &.is-popover-left .popover-content {
133
+ @include position-left();
134
+ }
156
135
 
157
- &.is-popover-right-tablet .popover-content {
158
- @include position-right();
159
- }
136
+ @include mobile {
137
+ &.is-popover-top-mobile .popover-content {
138
+ @include position-top();
139
+ }
140
+
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
  }