@trilogy-ds/styles 0.0.1-beta.9 → 0.0.1-calendar

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 (143) 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/_all.scss +2 -2
  5. package/framework/src/base/_all.scss +1 -1
  6. package/framework/src/base/_color.scss +1 -52
  7. package/framework/src/base/_elements.scss +1 -1
  8. package/framework/src/base/_generic.scss +9 -1
  9. package/framework/src/base/_helpers.scss +34 -44
  10. package/framework/src/base/_loading.scss +9 -2
  11. package/framework/src/base/_reset.scss +11 -1
  12. package/framework/src/components/_accordion.scss +55 -89
  13. package/framework/src/components/_autocomplete.scss +38 -0
  14. package/framework/src/components/_autolayout.scss +332 -0
  15. package/framework/src/components/_badge.scss +87 -0
  16. package/framework/src/components/_box.scss +168 -0
  17. package/framework/src/components/_breadcrumb.scss +29 -38
  18. package/framework/src/components/_button.scss +79 -0
  19. package/framework/src/components/_calendar.scss +125 -0
  20. package/framework/src/components/_card.scss +33 -87
  21. package/framework/src/components/_checkbox.scss +71 -0
  22. package/framework/src/components/_chips.scss +84 -0
  23. package/framework/src/{elements → components}/_container.scss +7 -39
  24. package/framework/src/components/_countdown.scss +49 -47
  25. package/framework/src/components/_divider.scss +25 -14
  26. package/framework/src/components/_fab.scss +25 -38
  27. package/framework/src/components/_flex-box.scss +457 -0
  28. package/framework/src/{elements → components}/_icon.scss +4 -4
  29. package/framework/src/components/_image.scss +69 -0
  30. package/framework/src/components/_index.scss +48 -0
  31. package/framework/src/components/_link.scss +58 -0
  32. package/framework/src/components/_list.scss +66 -0
  33. package/framework/src/{elements → components}/_loader.scss +2 -2
  34. package/framework/src/components/_modal.scss +182 -158
  35. package/framework/src/components/_otp.scss +11 -30
  36. package/framework/src/components/_pagination.scss +60 -159
  37. package/framework/src/components/_popover.scss +260 -260
  38. package/framework/src/components/_price.scss +140 -165
  39. package/framework/src/components/_product-tour.scss +2 -4
  40. package/framework/src/components/_radio.scss +82 -0
  41. package/framework/src/components/_range.scss +73 -72
  42. package/framework/src/components/_segmented-control.scss +55 -53
  43. package/framework/src/components/_select.scss +131 -0
  44. package/framework/src/components/_stepper.scss +42 -222
  45. package/framework/src/{elements → components}/_sticker.scss +25 -28
  46. package/framework/src/components/_switch.scss +97 -191
  47. package/framework/src/components/_table.scss +244 -0
  48. package/framework/src/components/_tabs.scss +101 -98
  49. package/framework/src/components/_tag.scss +114 -0
  50. package/framework/src/components/_text.scss +55 -0
  51. package/framework/src/components/_textarea.scss +46 -0
  52. package/framework/src/components/_timeline.scss +28 -113
  53. package/framework/src/components/_title.scss +151 -0
  54. package/framework/src/{elements → components/alert}/_alert.scss +13 -10
  55. package/framework/src/components/alert/_index.scss +2 -0
  56. package/framework/src/{elements → components/alert}/_toaster.scss +4 -8
  57. package/framework/src/components/input/_entry.scss +135 -0
  58. package/framework/src/{elements → components/input}/_form.scss +42 -33
  59. package/framework/src/components/input/_index.scss +4 -0
  60. package/framework/src/components/input/_input-gauge.scss +44 -0
  61. package/framework/src/components/input/_input-icons.scss +55 -0
  62. package/framework/src/components/progress/_index.scss +2 -0
  63. package/framework/src/components/progress/_progress-radial.scss +28 -0
  64. package/framework/src/{elements → components/progress}/_progress.scss +34 -23
  65. package/framework/src/elements/_index.scss +5 -0
  66. package/framework/src/elements/_other.scss +0 -41
  67. package/framework/src/{components → elements}/_plus-symbol.scss +1 -1
  68. package/framework/src/grid/_columns.scss +278 -763
  69. package/framework/src/grid/_rows.scss +45 -38
  70. package/framework/src/layout/_all.scss +0 -1
  71. package/framework/src/layout/_hero.scss +92 -214
  72. package/framework/src/layout/_section.scss +10 -29
  73. package/framework/src/theming/_all.scss +3 -0
  74. package/framework/src/theming/buttons_partial.scss +32 -0
  75. package/framework/src/theming/common_partials.scss +10 -0
  76. package/framework/src/theming/links_partial.scss +20 -0
  77. package/framework/src/trilogy-mangled.scss +3 -3
  78. package/framework/src/trilogy.scss +2 -2
  79. package/framework/src/utilities/_a11y.scss +13 -0
  80. package/framework/src/utilities/_all.scss +4 -0
  81. package/framework/src/utilities/_background.scss +21 -0
  82. package/framework/src/utilities/_controls.scss +38 -49
  83. package/framework/src/utilities/_derived-variables.scss +0 -103
  84. package/framework/src/utilities/_initial-variables.scss +4 -144
  85. package/framework/src/utilities/_pre.scss +4 -1
  86. package/framework/src/utilities/mixins/_arrow.scss +21 -0
  87. package/framework/src/utilities/mixins/_delete.scss +86 -0
  88. package/framework/src/utilities/mixins/_index.scss +11 -0
  89. package/framework/src/utilities/mixins/_markup-group.scss +27 -0
  90. package/framework/src/utilities/mixins/_mixins.scss +293 -0
  91. package/framework/src/utilities/mixins/_overlay.scss +7 -0
  92. package/framework/src/utilities/mixins/_pattern.scss +10 -0
  93. package/framework/src/utilities/mixins/_responsiveness.scss +84 -0
  94. package/framework/src/utilities/mixins/_spinner.scss +12 -0
  95. package/framework/src/utilities/mixins/_state.scss +25 -0
  96. package/framework/src/utilities/mixins/_unselectable.scss +10 -0
  97. package/framework/src/utilities/mixins/_utils.scss +24 -0
  98. package/framework/src/utilities/variables/_animation.scss +2 -0
  99. package/framework/src/utilities/variables/_color.scss +85 -0
  100. package/framework/src/utilities/variables/_font.scss +97 -0
  101. package/framework/src/utilities/variables/_index.scss +6 -0
  102. package/framework/src/utilities/variables/_responsiveness.scss +7 -0
  103. package/framework/src/utilities/variables/_shadow.scss +3 -0
  104. package/framework/src/utilities/variables/_zindex.scss +14 -0
  105. package/package.json +3 -3
  106. package/framework/src/components/_all.scss +0 -30
  107. package/framework/src/components/_autolayout2.scss +0 -38
  108. package/framework/src/components/_disclaimer.scss +0 -84
  109. package/framework/src/components/_dropdown.scss +0 -128
  110. package/framework/src/components/_level.scss +0 -120
  111. package/framework/src/components/_media.scss +0 -64
  112. package/framework/src/components/_menu.scss +0 -213
  113. package/framework/src/components/_progress-radial.scss +0 -23
  114. package/framework/src/components/_search-modal.scss +0 -197
  115. package/framework/src/components/_slices.scss +0 -316
  116. package/framework/src/components/_slider.scss +0 -92
  117. package/framework/src/elements/_all.scss +0 -35
  118. package/framework/src/elements/_badge.scss +0 -81
  119. package/framework/src/elements/_box.scss +0 -267
  120. package/framework/src/elements/_button.scss +0 -192
  121. package/framework/src/elements/_checkbox.scss +0 -39
  122. package/framework/src/elements/_checkradio.scss +0 -173
  123. package/framework/src/elements/_chips.scss +0 -100
  124. package/framework/src/elements/_dot.scss +0 -6
  125. package/framework/src/elements/_entry.scss +0 -109
  126. package/framework/src/elements/_image.scss +0 -59
  127. package/framework/src/elements/_input-gauge.scss +0 -37
  128. package/framework/src/elements/_input-icons.scss +0 -41
  129. package/framework/src/elements/_link.scss +0 -79
  130. package/framework/src/elements/_list.scss +0 -61
  131. package/framework/src/elements/_notification.scss +0 -151
  132. package/framework/src/elements/_options.scss +0 -146
  133. package/framework/src/elements/_paragraph.scss +0 -101
  134. package/framework/src/elements/_radio.scss +0 -67
  135. package/framework/src/elements/_select.scss +0 -315
  136. package/framework/src/elements/_switch.scss +0 -108
  137. package/framework/src/elements/_table.scss +0 -298
  138. package/framework/src/elements/_tag.scss +0 -131
  139. package/framework/src/elements/_textarea.scss +0 -125
  140. package/framework/src/elements/_timeline.scss +0 -283
  141. package/framework/src/elements/_title.scss +0 -139
  142. package/framework/src/layout/_toolbar.scss +0 -100
  143. package/framework/src/utilities/_mixins.scss +0 -744
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
  }