superdesk-ui-framework 3.0.41 → 3.0.43

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 (104) hide show
  1. package/app/styles/_accessibility.scss +349 -310
  2. package/app/styles/_alerts.scss +102 -71
  3. package/app/styles/_animations.scss +29 -16
  4. package/app/styles/_avatar.scss +159 -140
  5. package/app/styles/_badge.scss +11 -5
  6. package/app/styles/_big-icon-font.scss +21 -9
  7. package/app/styles/_boxed-list.scss +72 -47
  8. package/app/styles/_buttons.scss +266 -177
  9. package/app/styles/_carousel.scss +58 -45
  10. package/app/styles/_content-divider.scss +28 -2
  11. package/app/styles/_drag-drop.scss +3 -0
  12. package/app/styles/_empty-states.scss +21 -13
  13. package/app/styles/_hamburger.scss +142 -144
  14. package/app/styles/_helpers.scss +297 -93
  15. package/app/styles/_icon-font.scss +75 -43
  16. package/app/styles/_icon-labels.scss +11 -1
  17. package/app/styles/_labels.scss +27 -14
  18. package/app/styles/_loaders.scss +2 -1
  19. package/app/styles/_master-desk.scss +67 -31
  20. package/app/styles/_mixins.scss +40 -20
  21. package/app/styles/_modals.scss +112 -56
  22. package/app/styles/_panel-info.scss +38 -34
  23. package/app/styles/_popover.scss +0 -1
  24. package/app/styles/_publisher-styles.scss +132 -122
  25. package/app/styles/_sd-tag-input.scss +104 -24
  26. package/app/styles/_simple-list.scss +89 -66
  27. package/app/styles/_spinner.scss +24 -17
  28. package/app/styles/_table-list.scss +114 -80
  29. package/app/styles/_tables.scss +14 -2
  30. package/app/styles/_tabs-vertical.scss +46 -43
  31. package/app/styles/_tabs.scss +97 -87
  32. package/app/styles/_tag-labels.scss +26 -11
  33. package/app/styles/_thumb-carousel.scss +37 -11
  34. package/app/styles/_toggle-box.scss +27 -7
  35. package/app/styles/_toggle-button.scss +5 -1
  36. package/app/styles/_tooltips.scss +284 -272
  37. package/app/styles/components/_card-item.scss +268 -192
  38. package/app/styles/components/_list-item.scss +261 -175
  39. package/app/styles/components/_sd-circular-progress.scss +109 -79
  40. package/app/styles/components/_sd-collapse-box.scss +45 -33
  41. package/app/styles/components/_sd-comment-box.scss +17 -12
  42. package/app/styles/components/_sd-dropzone.scss +32 -15
  43. package/app/styles/components/_sd-editor-popup.scss +29 -15
  44. package/app/styles/components/_sd-grid-item.scss +349 -237
  45. package/app/styles/components/_sd-loader.scss +1 -2
  46. package/app/styles/components/_sd-media-carousel.scss +119 -78
  47. package/app/styles/components/_sd-notification-panel.scss +2 -1
  48. package/app/styles/components/_sd-pagination.scss +27 -19
  49. package/app/styles/components/_sd-photo-preview.scss +82 -41
  50. package/app/styles/components/_sd-searchbar.scss +79 -51
  51. package/app/styles/components/_sd-toaster.scss +52 -30
  52. package/app/styles/components/_subnav.scss +230 -135
  53. package/app/styles/components/_theme-selector.scss +78 -53
  54. package/app/styles/components/sd-slider.scss +11 -7
  55. package/app/styles/design-tokens/_design-tokens-general.scss +31 -27
  56. package/app/styles/design-tokens/_new-colors.scss +3 -1
  57. package/app/styles/dropdowns/_basic-dropdown.scss +164 -86
  58. package/app/styles/dropdowns/_input-dropdown.scss +5 -2
  59. package/app/styles/dropdowns/_navigation_dropdown.scss +18 -4
  60. package/app/styles/dropdowns/_nested-dropdown.scss +11 -2
  61. package/app/styles/dropdowns/_other_dropdown.scss +9 -3
  62. package/app/styles/editor/_editor-buttons.scss +10 -6
  63. package/app/styles/editor/_editor-themes.scss +401 -350
  64. package/app/styles/form-elements/_autocomplete.scss +7 -1
  65. package/app/styles/form-elements/_checkbox.scss +230 -159
  66. package/app/styles/form-elements/_forms-general.scss +345 -285
  67. package/app/styles/form-elements/_input-preview.scss +15 -9
  68. package/app/styles/form-elements/_input-wrap.scss +77 -71
  69. package/app/styles/form-elements/_inputs.scss +668 -489
  70. package/app/styles/form-elements/_radio.scss +10 -5
  71. package/app/styles/form-elements/_switch.scss +27 -16
  72. package/app/styles/grids/_basic-grid.scss +83 -64
  73. package/app/styles/grids/_grid-layout.scss +301 -165
  74. package/app/styles/grids/_layout-grid.scss +85 -59
  75. package/app/styles/grids/_sd-kanban-list.scss +14 -4
  76. package/app/styles/interface-elements/_side-panel.scss +279 -200
  77. package/app/styles/layout/_basic-layout.scss +36 -34
  78. package/app/styles/layout/_container.scss +38 -31
  79. package/app/styles/layout/_editor.scss +57 -17
  80. package/app/styles/layout/_general.scss +81 -67
  81. package/app/styles/menus/_sd-bottom-tabs.scss +21 -12
  82. package/app/styles/menus/_sd-content-navigation.scss +20 -16
  83. package/app/styles/menus/_sd-left-navigation.scss +62 -49
  84. package/app/styles/menus/_sd-sidebar-menu.scss +365 -323
  85. package/app/styles/menus/_sd-top-menu.scss +16 -7
  86. package/app/styles/primereact/_pr-autocomplete.scss +2 -0
  87. package/app/styles/primereact/_pr-datepicker.scss +20 -7
  88. package/app/styles/primereact/_pr-dialog.scss +55 -47
  89. package/app/styles/primereact/_pr-dropdown.scss +27 -22
  90. package/app/styles/primereact/_pr-general.scss +3 -0
  91. package/app/styles/primereact/_pr-menu.scss +2 -1
  92. package/app/styles/primereact/_pr-skeleton.scss +1 -0
  93. package/app/styles/primereact/_pr-tag-input.scss +1 -0
  94. package/app/styles/variables/_colors.scss +168 -170
  95. package/app/styles/variables/_typography.scss +1 -2
  96. package/app-typescript/components/Form/InputWrapper.tsx +1 -1
  97. package/app-typescript/components/Menu.tsx +1 -1
  98. package/dist/examples.bundle.css +18 -16
  99. package/dist/examples.bundle.js +5 -7
  100. package/dist/superdesk-ui.bundle.css +4271 -3557
  101. package/dist/superdesk-ui.bundle.js +4 -6
  102. package/package.json +2 -2
  103. package/react/components/Form/InputWrapper.d.ts +1 -1
  104. package/react/components/Menu.js +1 -1
package/app/styles/_tooltips.scss CHANGED
@@ -1,224 +1,236 @@
1
-
2
1
  /* Thanks to Jase Smith - codepen.io/jasesmith */
3
2
  [sd-tooltip],
4
3
  [data-sd-tooltip] {
5
- position: relative;
6
-
7
- /* Applies to all sd-tooltips */
8
- &::before,
9
- &::after {
10
- text-transform: none;
11
- font-size: 1.2rem;
12
- line-height: 1;
13
- user-select: none;
14
- pointer-events: none;
15
- position: absolute;
16
- display: none;
17
- opacity: 0;
18
- }
19
-
20
- &::before {
21
- content: '';
22
- border: 5px solid transparent;
23
- z-index: 1001;
24
- }
25
-
26
- &::after {
27
- text-align: center;
28
- /* Let the content set the size of the sd-tooltips */
29
- min-width: 3em;
30
- max-width: 21em;
31
- white-space: nowrap;
32
- overflow: hidden;
33
- text-overflow: ellipsis;
34
- padding: 0.8rem 1.2rem 0.9rem;
35
- border-radius: var(--b-radius--small);
36
- box-shadow: 0 8px 18px -5px rgba(0, 0, 0, 0.45);
37
- background: var(--sd-colour-background__tooltip);
38
- color: hsl(0, 0%, 100%);
39
- font-weight: 400;
40
- z-index: 1000;
41
- }
42
-
43
- /* Make the sd-tooltips respond to hover */
44
- &:hover::before,
45
- &:hover::after {
46
- display: block;
47
- }
4
+ position: relative;
5
+
6
+ /* Applies to all sd-tooltips */
7
+ &::before,
8
+ &::after {
9
+ text-transform: none;
10
+ font-size: 1.2rem;
11
+ line-height: 1;
12
+ user-select: none;
13
+ pointer-events: none;
14
+ position: absolute;
15
+ display: none;
16
+ opacity: 0;
17
+ }
18
+
19
+ &::before {
20
+ content: '';
21
+ border: 5px solid transparent;
22
+ z-index: 1001;
23
+ }
24
+
25
+ &::after {
26
+ text-align: center;
27
+ /* Let the content set the size of the sd-tooltips */
28
+ min-width: 3em;
29
+ max-width: 21em;
30
+ white-space: nowrap;
31
+ overflow: hidden;
32
+ text-overflow: ellipsis;
33
+ padding: 0.8rem 1.2rem 0.9rem;
34
+ border-radius: var(--b-radius--small);
35
+ box-shadow: 0 8px 18px -5px rgba(0, 0, 0, 0.45);
36
+ background: var(--sd-colour-background__tooltip);
37
+ color: hsl(0, 0%, 100%);
38
+ font-weight: 400;
39
+ z-index: 1000;
40
+ }
41
+
42
+ /* Make the sd-tooltips respond to hover */
43
+ &:hover::before,
44
+ &:hover::after {
45
+ display: block;
46
+ }
48
47
  }
49
48
 
50
49
  // [sd-tooltip] [flow]
51
50
  [sd-tooltip] {
52
- /* FLOW: UP */
53
- &:not([flow])::before,
54
- &[flow^="up"]::before {
55
- bottom: 100%;
56
- border-bottom-width: 0;
57
- border-top-color: var(--sd-colour-background__tooltip);
58
- }
59
-
60
- &:not([flow])::after,
61
- &[flow^="up"]::after {
62
- bottom: calc(100% + 5px);
63
- }
64
- &:not([flow])::before,
65
- &:not([flow])::after,
66
- &[flow^="up"]::before,
67
- &[flow^="up"]::after {
68
- left: 50%;
69
- transform: translate(-50%, -.5em);
70
- }
71
-
72
- /* FLOW: DOWN */
73
- &[flow^="down"]::before {
74
- top: 100%;
75
- border-top-width: 0;
76
- border-bottom-color: var(--sd-colour-background__tooltip);
77
- }
78
- &[flow^="down"]::after {
79
- top: calc(100% + 5px);
80
- }
81
- &[flow^="down"]::before,
82
- &[flow^="down"]::after {
83
- left: 50%;
84
- transform: translate(-50%, .5em);
85
- }
86
-
87
- /* FLOW: LEFT */
88
- &[flow^="left"]::before {
89
- top: 50%;
90
- border-right-width: 0;
91
- border-left-color: var(--sd-colour-background__tooltip);
92
- left: calc(0em - 5px);
93
- transform: translate(-.5em, -50%);
94
- }
95
- &[flow^="left"]::after {
96
- top: 50%;
97
- right: calc(100% + 5px);
98
- transform: translate(-.5em, -50%);
99
- }
100
-
101
- /* FLOW: RIGHT */
102
- &[flow^="right"]::before {
103
- top: 50%;
104
- border-left-width: 0;
105
- border-right-color: var(--sd-colour-background__tooltip);
106
- right: calc(0em - 5px);
107
- transform: translate(.5em, -50%);
108
- }
109
- &[flow^="right"]::after {
110
- top: 50%;
111
- left: calc(100% + 5px);
112
- transform: translate(.5em, -50%);
113
- }
114
-
115
- /* FX All The Things */
116
- &:not([flow]):hover::before,
117
- &:not([flow]):hover::after,
118
- &[flow^="up"]:hover::before,
119
- &[flow^="up"]:hover::after,
120
- &[flow^="down"]:hover::before,
121
- &[flow^="down"]:hover::after {
122
- animation: tooltips-vert 200ms ease-out forwards;
123
- }
124
-
125
- &[flow^="left"]:hover::before,
126
- &[flow^="left"]:hover::after,
127
- &[flow^="right"]:hover::before,
128
- &[flow^="right"]:hover::after {
129
- animation: tooltips-horz 200ms ease-out forwards;
130
- }
51
+
52
+ /* FLOW: UP */
53
+ &:not([flow])::before,
54
+ &[flow^="up"]::before {
55
+ bottom: 100%;
56
+ border-bottom-width: 0;
57
+ border-top-color: var(--sd-colour-background__tooltip);
58
+ }
59
+
60
+ &:not([flow])::after,
61
+ &[flow^="up"]::after {
62
+ bottom: calc(100% + 5px);
63
+ }
64
+
65
+ &:not([flow])::before,
66
+ &:not([flow])::after,
67
+ &[flow^="up"]::before,
68
+ &[flow^="up"]::after {
69
+ left: 50%;
70
+ transform: translate(-50%, -.5em);
71
+ }
72
+
73
+ /* FLOW: DOWN */
74
+ &[flow^="down"]::before {
75
+ top: 100%;
76
+ border-top-width: 0;
77
+ border-bottom-color: var(--sd-colour-background__tooltip);
78
+ }
79
+
80
+ &[flow^="down"]::after {
81
+ top: calc(100% + 5px);
82
+ }
83
+
84
+ &[flow^="down"]::before,
85
+ &[flow^="down"]::after {
86
+ left: 50%;
87
+ transform: translate(-50%, .5em);
88
+ }
89
+
90
+ /* FLOW: LEFT */
91
+ &[flow^="left"]::before {
92
+ top: 50%;
93
+ border-right-width: 0;
94
+ border-left-color: var(--sd-colour-background__tooltip);
95
+ left: calc(0em - 5px);
96
+ transform: translate(-.5em, -50%);
97
+ }
98
+
99
+ &[flow^="left"]::after {
100
+ top: 50%;
101
+ right: calc(100% + 5px);
102
+ transform: translate(-.5em, -50%);
103
+ }
104
+
105
+ /* FLOW: RIGHT */
106
+ &[flow^="right"]::before {
107
+ top: 50%;
108
+ border-left-width: 0;
109
+ border-right-color: var(--sd-colour-background__tooltip);
110
+ right: calc(0em - 5px);
111
+ transform: translate(.5em, -50%);
112
+ }
113
+
114
+ &[flow^="right"]::after {
115
+ top: 50%;
116
+ left: calc(100% + 5px);
117
+ transform: translate(.5em, -50%);
118
+ }
119
+
120
+ /* FX All The Things */
121
+ &:not([flow]):hover::before,
122
+ &:not([flow]):hover::after,
123
+ &[flow^="up"]:hover::before,
124
+ &[flow^="up"]:hover::after,
125
+ &[flow^="down"]:hover::before,
126
+ &[flow^="down"]:hover::after {
127
+ animation: tooltips-vert 200ms ease-out forwards;
128
+ }
129
+
130
+ &[flow^="left"]:hover::before,
131
+ &[flow^="left"]:hover::after,
132
+ &[flow^="right"]:hover::before,
133
+ &[flow^="right"]:hover::after {
134
+ animation: tooltips-horz 200ms ease-out forwards;
135
+ }
131
136
  }
132
137
 
133
138
  // [data-sd-tooltip] [data-flow]
134
139
  [data-sd-tooltip] {
135
- /* FLOW: UP */
136
- &:not([data-flow])::before,
137
- &[data-flow^="up"]::before {
138
- bottom: 100%;
139
- border-bottom-width: 0;
140
- border-top-color: var(--sd-colour-background__tooltip);
141
- }
142
-
143
- &:not([data-flow])::after,
144
- &[data-flow^="up"]::after {
145
- bottom: calc(100% + 5px);
146
- }
147
- &:not([data-flow])::before,
148
- &:not([data-flow])::after,
149
- &[data-flow^="up"]::before,
150
- &[data-flow^="up"]::after {
151
- left: 50%;
152
- transform: translate(-50%, -.5em);
153
- }
154
-
155
- /* FLOW: DOWN */
156
- &[data-flow^="down"]::before {
157
- top: 100%;
158
- border-top-width: 0;
159
- border-bottom-color: var(--sd-colour-background__tooltip);
160
- }
161
- &[data-flow^="down"]::after {
162
- top: calc(100% + 5px);
163
- }
164
- &[data-flow^="down"]::before,
165
- &[data-flow^="down"]::after {
166
- left: 50%;
167
- transform: translate(-50%, .5em);
168
- }
169
-
170
- /* FLOW: LEFT */
171
- &[data-flow^="left"]::before {
172
- top: 50%;
173
- border-right-width: 0;
174
- border-left-color: var(--sd-colour-background__tooltip);
175
- left: calc(0em - 5px);
176
- transform: translate(-.5em, -50%);
177
- }
178
- &[data-flow^="left"]::after {
179
- top: 50%;
180
- right: calc(100% + 5px);
181
- transform: translate(-.5em, -50%);
182
- }
183
-
184
- /* FLOW: RIGHT */
185
- &[data-flow^="right"]::before {
186
- top: 50%;
187
- border-left-width: 0;
188
- border-right-color: var(--sd-colour-background__tooltip);
189
- right: calc(0em - 5px);
190
- transform: translate(.5em, -50%);
191
- }
192
- &[data-flow^="right"]::after {
193
- top: 50%;
194
- left: calc(100% + 5px);
195
- transform: translate(.5em, -50%);
196
- }
197
-
198
- /* FX All The Things */
199
- &:not([data-flow]):hover::before,
200
- &:not([data-flow]):hover::after,
201
- &[data-flow^="up"]:hover::before,
202
- &[data-flow^="up"]:hover::after,
203
- &[data-flow^="down"]:hover::before,
204
- &[data-flow^="down"]:hover::after {
205
- animation: tooltips-vert 200ms ease-out forwards;
206
- }
207
-
208
- &[data-flow^="left"]:hover::before,
209
- &[data-flow^="left"]:hover::after,
210
- &[data-flow^="right"]:hover::before,
211
- &[data-flow^="right"]:hover::after {
212
- animation: tooltips-horz 200ms ease-out forwards;
213
- }
140
+
141
+ /* FLOW: UP */
142
+ &:not([data-flow])::before,
143
+ &[data-flow^="up"]::before {
144
+ bottom: 100%;
145
+ border-bottom-width: 0;
146
+ border-top-color: var(--sd-colour-background__tooltip);
147
+ }
148
+
149
+ &:not([data-flow])::after,
150
+ &[data-flow^="up"]::after {
151
+ bottom: calc(100% + 5px);
152
+ }
153
+
154
+ &:not([data-flow])::before,
155
+ &:not([data-flow])::after,
156
+ &[data-flow^="up"]::before,
157
+ &[data-flow^="up"]::after {
158
+ left: 50%;
159
+ transform: translate(-50%, -.5em);
160
+ }
161
+
162
+ /* FLOW: DOWN */
163
+ &[data-flow^="down"]::before {
164
+ top: 100%;
165
+ border-top-width: 0;
166
+ border-bottom-color: var(--sd-colour-background__tooltip);
167
+ }
168
+
169
+ &[data-flow^="down"]::after {
170
+ top: calc(100% + 5px);
171
+ }
172
+
173
+ &[data-flow^="down"]::before,
174
+ &[data-flow^="down"]::after {
175
+ left: 50%;
176
+ transform: translate(-50%, .5em);
177
+ }
178
+
179
+ /* FLOW: LEFT */
180
+ &[data-flow^="left"]::before {
181
+ top: 50%;
182
+ border-right-width: 0;
183
+ border-left-color: var(--sd-colour-background__tooltip);
184
+ left: calc(0em - 5px);
185
+ transform: translate(-.5em, -50%);
186
+ }
187
+
188
+ &[data-flow^="left"]::after {
189
+ top: 50%;
190
+ right: calc(100% + 5px);
191
+ transform: translate(-.5em, -50%);
192
+ }
193
+
194
+ /* FLOW: RIGHT */
195
+ &[data-flow^="right"]::before {
196
+ top: 50%;
197
+ border-left-width: 0;
198
+ border-right-color: var(--sd-colour-background__tooltip);
199
+ right: calc(0em - 5px);
200
+ transform: translate(.5em, -50%);
201
+ }
202
+
203
+ &[data-flow^="right"]::after {
204
+ top: 50%;
205
+ left: calc(100% + 5px);
206
+ transform: translate(.5em, -50%);
207
+ }
208
+
209
+ /* FX All The Things */
210
+ &:not([data-flow]):hover::before,
211
+ &:not([data-flow]):hover::after,
212
+ &[data-flow^="up"]:hover::before,
213
+ &[data-flow^="up"]:hover::after,
214
+ &[data-flow^="down"]:hover::before,
215
+ &[data-flow^="down"]:hover::after {
216
+ animation: tooltips-vert 200ms ease-out forwards;
217
+ }
218
+
219
+ &[data-flow^="left"]:hover::before,
220
+ &[data-flow^="left"]:hover::after,
221
+ &[data-flow^="right"]:hover::before,
222
+ &[data-flow^="right"]:hover::after {
223
+ animation: tooltips-horz 200ms ease-out forwards;
224
+ }
214
225
  }
215
226
 
216
227
  /* magic! */
217
228
  [sd-tooltip]::after {
218
- content: attr(sd-tooltip);
229
+ content: attr(sd-tooltip);
219
230
  }
231
+
220
232
  [data-sd-tooltip]::after {
221
- content: attr(data-sd-tooltip);
233
+ content: attr(data-sd-tooltip);
222
234
  }
223
235
 
224
236
  /* don't show empty sd-tooltips */
@@ -226,115 +238,115 @@
226
238
  [sd-tooltip='']::after,
227
239
  [data-sd-tooltip='']::before,
228
240
  [data-sd-tooltip='']::after {
229
- display: none !important;
241
+ display: none !important;
230
242
  }
231
243
 
232
244
  /* KEYFRAMES */
233
245
  @keyframes tooltips-vert {
234
- to {
235
- opacity: .95;
236
- transform: translate(-50%, 0);
237
- }
246
+ to {
247
+ opacity: .95;
248
+ transform: translate(-50%, 0);
249
+ }
238
250
  }
239
251
 
240
252
  @keyframes tooltips-horz {
241
- to {
242
- opacity: .95;
243
- transform: translate(0, -50%);
244
- }
253
+ to {
254
+ opacity: .95;
255
+ transform: translate(0, -50%);
256
+ }
245
257
  }
246
258
 
247
-
248
259
  [disabled]:hover {
249
- &[sd-tooltip]::before,
250
- &[data-sd-tooltip]::before,
251
- &[sd-tooltip]::after,
252
- &[data-sd-tooltip]::after {
253
- display: none !important;
254
- }
260
+
261
+ &[sd-tooltip]::before,
262
+ &[data-sd-tooltip]::before,
263
+ &[sd-tooltip]::after,
264
+ &[data-sd-tooltip]::after {
265
+ display: none !important;
266
+ }
255
267
  }
256
268
 
257
269
  // ====== APEND TO BODY (Prime React) ====== //
258
270
 
259
271
  .p-tooltip {
260
- position:absolute;
261
- z-index: 2000 !important;
262
- min-width: 3em;
263
- max-width: 21em;
272
+ position: absolute;
273
+ z-index: 2000 !important;
274
+ min-width: 3em;
275
+ max-width: 21em;
264
276
  }
265
277
 
266
278
  .p-tooltip.p-tooltip-right,
267
279
  .p-tooltip.p-tooltip-left {
268
- padding: 0 5px;
280
+ padding: 0 5px;
269
281
  }
270
282
 
271
283
  .p-tooltip.p-tooltip-top,
272
284
  .p-tooltip.p-tooltip-bottom {
273
- padding: 5px 0;
285
+ padding: 5px 0;
274
286
  }
275
287
 
276
288
  .p-tooltip .p-tooltip-text {
277
- white-space: pre-line;
278
- min-width: 3em;
279
- max-width: 21em;
280
- white-space: nowrap;
281
- overflow: hidden;
282
- text-overflow: ellipsis;
283
- padding: 0.8rem 1.2rem 0.9rem;
284
- border-radius: var(--b-radius--small);
285
- background: var(--sd-colour-background__tooltip);
286
- box-shadow: 0 8px 18px -5px rgba(0, 0, 0, 0.45);
287
- color: hsl(0, 0%, 100%);
288
- font-weight: 400;
289
- text-transform: none;
290
- font-size: 1.2rem;
291
- line-height: 1;
289
+ white-space: pre-line;
290
+ min-width: 3em;
291
+ max-width: 21em;
292
+ white-space: nowrap;
293
+ overflow: hidden;
294
+ text-overflow: ellipsis;
295
+ padding: 0.8rem 1.2rem 0.9rem;
296
+ border-radius: var(--b-radius--small);
297
+ background: var(--sd-colour-background__tooltip);
298
+ box-shadow: 0 8px 18px -5px rgba(0, 0, 0, 0.45);
299
+ color: hsl(0, 0%, 100%);
300
+ font-weight: 400;
301
+ text-transform: none;
302
+ font-size: 1.2rem;
303
+ line-height: 1;
292
304
  }
293
305
 
294
306
  .p-tooltip-arrow {
295
- --tooltip-arrow_border: 6px;
296
- border: var(--tooltip-arrow_border) solid transparent;
297
- z-index: 1001;
298
- user-select: none;
299
- pointer-events: none;
300
- position: absolute;
301
- width: 6px;
302
- height: 6px;
303
- overflow: hidden;
307
+ --tooltip-arrow_border: 6px;
308
+ border: var(--tooltip-arrow_border) solid transparent;
309
+ z-index: 1001;
310
+ user-select: none;
311
+ pointer-events: none;
312
+ position: absolute;
313
+ width: 6px;
314
+ height: 6px;
315
+ overflow: hidden;
304
316
  }
305
317
 
306
318
  .p-tooltip-top .p-tooltip-arrow {
307
- border-width: var(--tooltip-arrow_border);
308
- bottom: 0;
309
- left: calc(50% - 3px);
310
- border-bottom-width: 0;
311
- border-top-color: var(--sd-colour-background__tooltip);
319
+ border-width: var(--tooltip-arrow_border);
320
+ bottom: 0;
321
+ left: calc(50% - 3px);
322
+ border-bottom-width: 0;
323
+ border-top-color: var(--sd-colour-background__tooltip);
312
324
  }
313
325
 
314
326
  .p-tooltip-bottom .p-tooltip-arrow {
315
- border-width: var(--tooltip-arrow_border);
316
- top: 0;
317
- left: calc(50% - 3px);
318
- border-top-width: 0;
319
- border-bottom-color: var(--sd-colour-background__tooltip);
327
+ border-width: var(--tooltip-arrow_border);
328
+ top: 0;
329
+ left: calc(50% - 3px);
330
+ border-top-width: 0;
331
+ border-bottom-color: var(--sd-colour-background__tooltip);
320
332
  }
321
333
 
322
334
  .p-tooltip-right .p-tooltip-arrow {
323
- border-width: var(--tooltip-arrow_border);
324
- top: calc(50% - 3px);
325
- left: 0;
326
- border-left-width: 0;
327
- border-right-color: var(--sd-colour-background__tooltip);
335
+ border-width: var(--tooltip-arrow_border);
336
+ top: calc(50% - 3px);
337
+ left: 0;
338
+ border-left-width: 0;
339
+ border-right-color: var(--sd-colour-background__tooltip);
328
340
  }
329
341
 
330
342
  .p-tooltip-left .p-tooltip-arrow {
331
- border-width: var(--tooltip-arrow_border);
332
- top: calc(50% - 3px);
333
- right: 0;
334
- border-right-width: 0;
335
- border-left-color: var(--sd-colour-background__tooltip);
343
+ border-width: var(--tooltip-arrow_border);
344
+ top: calc(50% - 3px);
345
+ right: 0;
346
+ border-right-width: 0;
347
+ border-left-color: var(--sd-colour-background__tooltip);
336
348
  }
337
349
 
338
350
  .p-tooltip-right {
339
- margin-left: 8px;
340
- }
351
+ margin-left: 8px;
352
+ }